[分享]css中将字显示在图片的上面

在Web开发中，我们经常需要在页面中展示图片。而有些时候，我们希望在图片的上面显示一段文字，以方便用户了解图片的内容。这个时候，我们可以使用CSS来实现将字显示在图片的上面的效果。首先，需要将图片和字...

在Web开发中，我们经常需要在页面中展示图片。而有些时候，我们希望在图片的上面显示一段文字，以方便用户了解图片的内容。

这个时候，我们可以使用CSS来实现将字显示在图片的上面的效果。首先，需要将图片和字放在同一个容器里面：

<div class="container">
  <img src="example.jpg" alt="example">
  <p>这是一张示例图片</p>
</div> 

接下来，我们可以使用CSS中的position属性来定位图片和文字：

.container {
  position: relative;
}
.container img {
  width: 100%;
}
.container p {
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
} 

首先，我们将容器设置为相对定位，这样里面的后代元素就可以使用绝对定位进行定位。然后，我们将图片的宽度设置为100%，这样图片就可以适应容器的大小。接着，我们将文字设置为绝对定位，并且设置top和left值为0，这样文字就会出现在图片的左上角。

最后，我们在文字的样式里面设置了背景颜色和文本颜色，并且设置了一些内外边距，这样文字就更加美观。

这样，我们就成功地将字显示在图片的上面了。