我正在尝试创建一个与图像大小完全匹配的纯色叠加层,并在该叠加层上显示文本.如果可能的话,我只想用
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/
http://jsfiddle.net/kb3Kf/2/
缺少的主要是你给文本一个绝对位置,但是没有给包装器一个相对的位置,就像这样:
.img-overlay { position: relative; }
这很简单,你可以把它带到很多方向.告诉我,这是你想要的.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。