Question

http://jsfiddle.net/LFtHg/

我正在尝试创建我的第一个响应式网站。为此，我要包括一张图片。此图像的标题应以透明叠加显示。但是，由于不透明度设置被传递给子元素，我已从容器中删除了文本。

我根本无法显示叠加层（因为它里面没有内容）。我不能添加一个固定的高度，因为我想成像以响应浏览器大小的变化。如何确保显示？

谢谢你， Ĵ

编辑，以及在浏览器调整大小时缩放叠加层的最佳方法是什么。我不确定这种方法是否可行。

Answer 1

首先，您可以使用RGBA背景（background: rgba(0,0,0,.5);）而不是使用不透明度。

其次，您需要为span.figcaption明确设置宽度（您也可以通过指定左右偏移属性来实现）

也许这个演示http://dabblet.com/gist/2778608也可以帮助你（图像可以是任意大小 - 调整浏览器窗口大小以查看所有内容的大小调整。）

Answer 2

将以下规则添加到现有示例中会有效地延伸.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;}

您可以随意将值调整为％设置，以便标题显示为居中等。

顺便说一下，你知道你的实施还没有流动，对吗？

在响应式图像上重叠

2 个答案: