如何将 HTML 中的图像覆盖在 CSS 中的文本上
我试图将 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>
慕妹3146593浏览 124回答 2
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 -
倚天杖
您应该用于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>
随时随地看视频慕课网APP
相关分类
Html5