响应性，透明的CSS图像标题，优雅降级？

Question

在图像上创建响应式，透明的CSS字幕的正确方法是什么 - 在旧浏览器中优雅地降级？

我正在努力实现：

• 居中的垂直图像列
• 图像高度和宽度相等
• 每张图片都有一个应居中的标题
• 标题应具有透明背景
• 如果在不支持透明度的旧浏览器中背景变黑，那将会很不错

如果你看一下this Fiddle example，那显然有很多错误。

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 code是我们遇到问题的地方。它甚至是正确的方法吗？我得到它进行一些微调（不包括在内），但无论如何，微调似乎对我没有语义意义。

例如，结果如下：

我觉得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/