我試圖將 HTML 代碼中的兩個(gè)圖像覆蓋在 CSS 網(wǎng)頁(yè)上顯示的文本上，這是實(shí)現(xiàn)此目的的最簡(jiǎn)單方法。我希望這兩個(gè)圖像位于當(dāng)前位于這些圖像之上的文本之上。HTML 代碼：<body> <img src="" id="image" style="width:270px;height:270px; position:absolute; left:2270px;top:770px;"/> <img src="" id="image1" style="width:270px;height:270px; position:absolute; left:30px;top:770px;"/> </body>
2 回答
森林海
TA貢獻(xiàn)2011條經(jīng)驗(yàn) 獲得超2個(gè)贊
使用z-index,position: relative;和position: absolute;.
這是您的 HTML：
<body>
<img src="" id="image" style="width:270px;height:270px;"/>
<img src="" id="image1" style="width:270px;height:270px;"/>
This is a text!
</body>
然后添加CSS：
img {
position: relative;
z-index: 1;
}
div {
position: absolute;
top: 0px; //To see the difference
}
代碼筆： https: //codepen.io/marchmello/pen/ExjqGYQ
倚天杖
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
您應(yīng)該用于z-index覆蓋文本和圖像：
img {
position: absolute;
z-index: 2;
width: 200px;
}
div {
position: relative;
z-index: 1;
color: black;
}
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
<div>This is text over the image that goes on for a while</div>
- 2 回答
- 0 關(guān)注
- 187 瀏覽
添加回答
舉報(bào)
0/150
提交
取消