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

发布时间：2020-12-14 22:34:54 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个与图像大小完全匹配的纯色叠加层,并在该叠加层上显示文本.如果可能的话,我只想用 HTML和CSS来做这件事. 图像可以是任何大小,并且将被调整大小以适合其父容器中的中心.像这样的东西(不起作用)： HTML： div class="img-overlay" img src="f

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

我认为HTML5的< figure>标签可能在这里有所帮助,但在这方面没有取得多大成功.以下内容将标题宽度与图像宽度保持一致,但是当我尝试将其从文档流中移除并将其放置在图像上时,由于图像以边距为中心,因此它会结束到图像的左侧：0 auto; .

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

解决方法

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

缺少的主要是你给文本一个绝对位置,但是没有给包装器一个相对的位置,就像这样：

.img-overlay
{
    position: relative;
}

这很简单,你可以把它带到很多方向.告诉我,这是你想要的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!