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

发布时间:2021-10-06 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了html5 – 将figcaption与图中的图像底部对齐前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<figure>
     <img src="http://lorempixel.com/x/x" alt="figure">
     <figcaption>Nam elementum non massa at mattis.</figcaption>
</figure>

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

解决方法

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

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

总结


以上是前端之家为你收集整理的html5 – 将figcaption与图中的图像底部对齐全部内容,希望文章能够帮你解决html5 – 将figcaption与图中的图像底部对齐所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。