我試圖將 HTML 代碼中的兩個圖像覆蓋在 CSS 網頁上顯示的文本上，這是實現此目的的最簡單方法。我希望這兩個圖像位于當前位于這些圖像之上的文本之上。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貢獻2011條經驗 獲得超2個贊
使用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貢獻1828條經驗 獲得超3個贊
您應該用于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 關注
- 172 瀏覽
添加回答
舉報
0/150
提交
取消