如何在html中将文本置于图像之上？

如何在HTML中将文本置于图像之上。每次我输入下面的代码时，文本都会出现在图像下面

<img src="example.jpg">Text</img>

<div class="imageContainer">Some Text</div>

文本

The-它没有结束标记

---

如果图像是。如果是内容图像，则在容器上设置

position:relative

，然后设置其中的图像和/或文本。

您需要在相对定位的

img

标记上使用绝对定位的CSS。本文给出了一个将文本放置在图像上的分步示例。

您可以创建一个与图像大小完全相同的div

<img src="example.jpg">Text</img>

<div class="imageContainer">Some Text</div>

注意：这会悄悄地篡改文档的语义。如果需要，请使用javascript将div插入到真实图像的位置。

您可以尝试以下操作

<div class="image">

      <img src="" alt="" />

      <h2>Text you want to display over the image</h2>

</div>

---

使用

absolute

作为

position

不响应+移动友好。我建议将

div

与

背景图像一起使用，然后将文本放置在
div
中将文本放置在图像上方。根据您的html，您可能需要将
height
与
vh
值一起使用，这是不正确的html
img
是一个自动关闭的标签，因此：
（相当于，在XHTML中：
）。虽然Caspar的解决方案工作得非常好，但我已经在这一个上投了赞成票，因为它退化得很好。
位置：绝对
起到了关键作用，但却是响应能力的杀手