如何在图像上放置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属性对于视觉上“堆叠”元素非常有用。