将figcaption与图中的图像底部对齐

Question

<figure>
     <img src="http://lorempixel.com/x/x" alt="figure">
     <figcaption>Nam elementum non massa at mattis.</figcaption>
</figure>

我正在创建一个CSS文件,并希望在图像顶部放置100%宽度和半透明背景颜色的figcaption,但我希望figcaption框的底部和图像的底部始终是无论使用什么图像都一样.

Answer 1

在figcaption元素上使用绝对定位.不要忘记在图元素上设置"position:relative".这是一个例子:http://jsfiddle.net/armordecai/xL1bk6k7/

figure {
     position: relative;
}
figure img {
    display: block;
}
figcaption {
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}