我正在尝试创建我的第一个响应式网站。为此，我包含了一张图片。此图像有一个标题，应该以透明覆盖显示。但是，由于不透明度设置被传递给子元素，我已经从容器中删除了文本。
我根本无法显示叠加层（因为它里面没有内容）。我不能真正添加一个固定的高度，因为我想要图像以响应浏览器大小的变化。如何确保显示此内容？
谢谢你，J
编辑，还有什么是在浏览器调整大小时缩放叠加层的最佳方式。我不确定这种方法是否可行。
user140291
问问题
6286 次
2 回答
3
首先，您可以使用 RGBA 背景 ( background: rgba(0,0,0,.5);) 而不是不透明度。
其次，您需要为您的显式设置宽度span.figcaption（您也可以通过指定左右偏移属性来做到这一点）
也许这个演示http://dabblet.com/gist/2778608也可能对您有所帮助（图像可以是任何大小 - 调整浏览器窗口的大小以查看所有内容如何调整大小）。
于 2012-05-24T00:07:11.210 回答
1
将以下规则添加到现有示例中可以有效地拉伸.figcaption元素以完全覆盖.figure, fiddle：
.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
您可以将值任意调整为 % 设置，以使标题居中显示等。
顺便说一句，你知道你的实施还不是流动的，对吧？
于 2012-05-23T22:56:33.080 回答