用css编写一段文字在照片上的代码

可以使用CSS的position属性和z-index属性来实现在照片上方显示文字的效果。以下是示例代码：

<div class="photo-container">
  <img src="photo.jpg" alt="照片">
  <div class="text-overlay">这里是文字</div>
</div>

.photo-container {
  position: relative; /* 确保容器为定位上下文 */
  width: 500px;
  height: 500px;
}

.text-overlay {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 从容器顶部算起，垂直居中 */
  left: 50%; /* 从容器左侧算起，水平居中 */
  transform: translate(-50%, -50%); /* 将元素居中 */
  z-index: 1; /* 确保文字在图片上方显示 */
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px black; /* 添加阴影效果 */
}

其中，`.photo-container`是照片和文字的容器，`.text-overlay`是显示文字的元素。使用`position: absolute`将文字元素绝对定位，并使用`top`和`left`属性将其居中显示。使用`transform: translate(-50%, -50%)`将元素居中，`z-index: 1`确保文字在图片上方显示。其他样式可以根据需要进行调整。