css 图片下方显示文字

在网页设计时，除了简洁明了的排版以外，图片的处理也是非常关键的一步。在图片的下方添加文字说明可以增强用户信息的呈现，让网页更加清晰易懂。下面介绍一种通过CSS实现图片下方文字显示的方法。

<div class="img-wrap">
  <img src="image.jpg" alt="图片">
  <div class="img-text">这里是图片下方的文字说明</div>
</div>

css 图片下方显示文字

首先，我们需要将图片和文字都放在一个

标签内，以便于处理样式。同时，对该

标签进行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%，并添加背景颜色和文字颜色，使文字和图片形成明显的对比。

这样，一个CSS实现的图片下方显示文字的效果就完成啦！

上一篇：css 图片下字体是水平下一篇：html代码中代码注解怎么加

css 图片下方显示文字

相关文章