在网页设计时，除了简洁明了的排版以外，图片的处理也是非常关键的一步。在图片的下方添加文字说明可以增强用户信息的呈现，让网页更加清晰易懂。下面介绍一种通过CSS实现图片下方文字显示的方法。
<div class="img-wrap"> <img src="image.jpg" alt="图片"> <div class="img-text">这里是图片下方的文字说明</div> </div>
标签内，以便于处理样式。同时，对该
标签进行class的定义，便于后续样式调用。
.img-wrap {
position: relative;
display: inline-block;
}
.img-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0,.5);
color: #fff;
text-align: center;
padding: .2em;
}
接着，我们在CSS中为图片下方的文字定义样式。使用position属性，将文字区块的位置设置为相对于img-wrap的绝对定位，并将bottom和left值设为0，这样可以将文字定位到图片下方。将文字宽度设为100%，并添加背景颜色和文字颜色，使文字和图片形成明显的对比。
相关文章
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
