css - 如何在图像上添加 HTML 文本，或使背景图像具有响应性

Question

我有个问题。

我正在创建一个响应式标题图像，它将缩小到移动设备并占据屏幕的整个宽度。

我想用img标签做到这一点，然后应用 100% 的最大宽度，但我想在这个图像上包含一些文本，所以选择使用背景图像。我不想在图像上绝对显示文本，因为这会导致移动设备出现问题。

另外，关于背景图片，我不能使用背景尺寸，因为 ie8 不支持。

有没有其他方法可以实现在图像上放置文本，图像占据容器的全宽和图像的全高？

Answer 1

<div id="container" style="height: 100px; width:100px; display:block;">
  <img src="some-img.jpg" style="display:block;"/>
  <span style="position:absolute;">Text over image</span>
</div>

本质上，您只需要在父级内将文本定位在图像上。

z-index如果您有多个相互竞争的元素，属性对于“堆叠”视觉元素很有用。