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

Question

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

我想要实现:

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

如果你看看这个小提琴的例子,那显然有很多错误.

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/