html css让文字显示在图片上

可以使用CSS中的position属性，将文字用一个div元素包裹，并设置其position属性为absolute，再通过top、left属性来确定字体的位置，从而让文字显示在图片上面。例如：

HTML代码:

<div class="container">
  <img src="example.jpg" alt="example">
  <div class="caption">This is a caption</div>
</div>

CSS代码:

.container {
  position: relative;
  display: inline-block;
}

.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 10px;
  font-size: 16px;
  z-index: 1;
}

在这个例子中，我们将img和其上面的文字都放在一个container中，并为这个container设置position: relative;，使其成为一个定位上下文。然后用一个div包裹文字，并设置其position为absolute，将其放在图片上方。通过设置top、left属性，让文字在图片中心位置。通过z-index属性，确保文字在图片上层显示。