css中怎样让文字在图片上面

在Web设计中，经常需要将文字放在图片上方，以达到更好的视觉效果。这可以通过CSS来实现。在实现之前，需要确保图片的定位是相对于父容器定位的。
首先，我们需要将图片和文字都放在一个父容器div中，然后使用position:relative;将该div定位为相对定位。接着，为文字创建一个绝对定位的容器，其中写入要展示的文字内容，并设置z-index为更高的层级，这样文字就可以显示在图片的上方了。
代码如下：

div {
  position: relative;
  display: inline-block;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  color: #fff;
} 

在上述代码中，我们将img标签设置为块级元素，以便能够自适应其父容器的宽度。然后，我们为文字创建一个类名为“text”的容器，并将其相对于父容器定位为绝对定位。接着，我们用top和left属性设置文字容器在父容器中的偏移量，以便将其居中显示。最后，我们设置z-index属性将文字容器置于图片上方，以便实现文字显示在图片上方的效果。
在HTML中，代码如下：

<div>
  <img src="image.jpg">
  <div class="text">
    <p>这里是要展示的文字内容</p>
  </div>
</div> 

在上述代码中，我们将要展示的文字内容写入了一个p标签中，以方便修改样式。然后，我们将图片和文字都放在了父容器div中，以便实现之前的CSS样式。
通过以上步骤，我们就可以轻松实现文字显示在图片上方的效果了。