图像上的文本和背景色叠加

Question

我正在尝试创建一个与图像大小完全匹配的纯色覆盖层，并在该覆盖层上显示文本。如果可能的话，我想仅使用HTML和CSS来实现。

图像可以是任何大小，并将按比例缩放并居中于其父容器内。类似于这样（不起作用的代码）： HTML：

<div class="img-overlay">
  <img src="file.jpg">
  <div class="overlay">Text will flow...</div>
</div>

CSS:

.img-overlay img {
  margin: 0 auto;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
  background-color: rgba(255,255,255,0.5);
}

我认为HTML5的<figure>标签可能会对此有所帮助，但在这方面并没有取得太大的成功。以下代码将标题宽度固定为图像宽度，但当我尝试将其从文档流中移除并将其放置在图像上方时，由于图像通过margin: 0 auto;居中，它最终出现在图像左侧。

<figure>
  <img src="file.jpg">
  <figcaption>Text will flow...</figcaption>
</figure>

- ericsoco

Answer 1

我为您制作了一个示例。 http://jsfiddle.net/kb3Kf/2/ 主要问题是您给文本设置了绝对位置，但没有给包装器设置相对位置，如下所示：

.img-overlay
{
    position: relative;
}

这很简单，你可以将其引申到许多方向。如果这是你想要的，请告诉我。

- Itay

---

你们两个都是对的——忘记设置父元素的位置了。嗯。 - ericsoco

Answer 2

您只是忘记设置父级img-overlay元素的位置。当某物具有“absolute”位置时，它是相对于其父级的位置而言的。父元素需要具有定位。

.img-overlay {
    position: relative;
    width: 300px;

}

.img-overlay img {
width:100%;
}

.overlay {
  position: absolute;
  width:100%;
  height: 100%;
  top:0px;
  left:0px;
  background-color: rgba(255,255,255,0.5);

}

- helixmat