[分享]css中如何实现图片上写字

CSS中如何实现图片上写字 在网页设计中，有时候我们想给一个图片加上一些文字描述，那么该怎样实现呢？这里我们使用CSS来解决这个问题。 首先，我们需要在HTML中引入需要添加文字的图片，如下所示： ...

CSS中如何实现图片上写字
在网页设计中，有时候我们想给一个图片加上一些文字描述，那么该怎样实现呢？这里我们使用CSS来解决这个问题。
首先，我们需要在HTML中引入需要添加文字的图片，如下所示：

<div class="image-wrap">
  <img src="example.jpg" alt="Example Image">
  <p class="img-description">这是一张示例图片</p>
</div>

以上代码将给需要添加文字的图片建立一个包裹层，并使用`class`属性来定义它们的样式。
接下来，我们可以在CSS中使用`position`属性来给文字定位，使用`z-index`属性来设置文字在图片中的层级。代码如下：

.image-wrap {
  position: relative;
  display: inline-block;
}
<br>
.img-description {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
  font-size: 14px;
  z-index: 1;
}

以上代码将文字定位在图片下方，使用半透明的黑色背景和白色文字，使得文字更加清晰可见。
最后，我们可以使用CSS中的一些其他技巧来调整包裹层和文字的样式，让整个效果更加完美。例如，可以设置图片的`max-width`来保证图片在不同的屏幕上都有适合的大小，可以给包裹层使用一个边框和`box-shadow`来突出显示图片。
总结
通过使用CSS的定位和层级技巧，我们可以方便地在图片上添加文字描述，使得网页内容更加完整和清晰。希望以上代码能够对您有所帮助！