css怎么使文字显示在图片

CSS可以帮助我们更好地控制网页的排版和样式，其中让文字显示在图片上也是一个常见需求。

要实现这一效果，我们可以使用CSS的position属性来定位元素。首先，我们需要将图片和文字分别放入不同的容器中：

<div class="container">
  <img src="example.jpg" class="img-container">
  <p class="text-container">这是一段文字</p>
</div>

同样，我们也需要为这些容器设置position属性，将它们定位到同一位置。我们可以使用top和left两个属性来调整它们的位置：

.container {
  position: relative;
}
.img-container {
  position: absolute;
  top: 0;
  left: 0;
}
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

在上面的代码中，我们为父容器设置了relative定位，并将图片和文字分别设置为absolute定位。其中，.img-container的top和left都为0，表示需要将图片放置在父容器的左上角。而.text-container的top和left都为50%，表示需要将文字放置在父容器的中央。

最后，我们使用transform属性来微调文字的位置，将其垂直和水平居中显示。（需要注意的是，transform需要与top和left一起使用，否则可能会出现样式错乱的情况。）

经过以上操作，我们就可以轻松地将文字显示在图片上了。