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

【问题标题】：Text and background-color overlay on image图像上的文本和背景颜色叠加
【发布时间】：2013-08-13 01:57:40
【问题描述】：

我正在尝试创建一个与图像大小完全匹配的纯色叠加层，并在该叠加层上显示文本。如果可能的话，我只想用 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>

【问题讨论】：

标签： html css image overlay figure

【解决方案1】：

我为你做了一个例子。 http://jsfiddle.net/kb3Kf/2/

缺少的主要内容是您给文本一个绝对位置，但没有给包装器一个相对位置，如下所示：

.img-overlay
{
    position: relative;
}

这真的很简单，你可以把它带到很多方向。告诉我这是不是你想要的。

【讨论】：

你说得对——忘记设置父元素的位置。呵呵。

【解决方案2】：

您只是缺少设置父 img-overlay 元素的位置。当某物具有“绝对”位置时，指的是它相对于其父级的位置。父级需要有定位。

.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);

}

【讨论】：