我试图将 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 关注
- 129 浏览
添加回答
举报
0/150
提交
取消