image - 具有优雅降级的响应式透明 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/