如何将HTML中的图像覆盖在CSS中的文本上[重复]答案

【问题标题】：How to overlay image in HTML over text in CSS [duplicate]如何将HTML中的图像覆盖在CSS中的文本上[重复]
【发布时间】：2020-07-19 18:45:42
【问题描述】：

我正在尝试将 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>

【问题讨论】：

你能分享一个codepen的链接吗？
你想把图像放在一起吗？或者你有文字说明你在上面（或后面）做什么？
@jack 是的，我有想要放在上面的文字，但目前文字在图片上方

标签： javascript jquery html css

【解决方案1】：

使用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

【讨论】：

太棒了！谢谢@MARSHMALLOW 这工作完美

【解决方案2】：

您应该使用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>

【讨论】：

谢谢！这帮助很大