image - 具有优雅降级的响应式、透明 CSS 图像标题？

Question

在图像上创建响应式、透明的 CSS 标题的正确方法是什么——在旧浏览器中优雅地降级？

我正在努力实现：

• 居中的垂直图像列
• 图像的高度和宽度相等
• 每个图像都有一个应该居中的标题
• 字幕应具有透明背景
• 如果在不支持透明度的旧浏览器中背景变黑就好了

如果你看一下这个 Fiddle 例子，它显然有很多问题。

HTML5 的基本前提是：

<section>
    <figure>
        <img src="1.jpg">
        <figcaption>Caption 1</figcaption>
    </figure>

    <figure>
        <img src="2.jpg">
        <figcaption>Caption 2</figcaption>
    </figure>

    <figure>
        <img src="3.jpg">
        <figcaption>Caption 3</figcaption>
    </figure>
</section>

但是CSS3 代码是我们遇到问题的地方。这是正确的方法吗？我让它与一些微调（不包括在内）一起工作，但微调对我来说似乎没有语义意义。

例如，这是结果：

我感觉 CSS 在很多层面上都是错误的（双关语）。

Answer 1

我稍微修改了你的 CSS。主要更改是添加position: relative;到父元素和position: absolute;标题。

CSS：

section {
    overflow: auto;
}

section figure {
    float: left;
    clear: both;

    position: relative;
    overflow: auto;

    margin: 0 auto;
    padding: 30px 0 0 0;
    font-size: 15px;
}

section figure img {
    vertical-align: bottom;
}

section figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff; 
    padding: 10px;
}


section {
    padding-bottom: 30px;
    background: #ccc;

}

演示：http: //jsfiddle.net/XjthT/6/