css在图片上添加文字

要在图片上添加文字，可以使用CSS的`::before`或`::after`伪元素来实现。首先，需要将图片作为背景图像放入一个容器中，然后使用伪元素来添加文字。以下是一个示例代码：

HTML代码：

<div class="image-container"></div>

CSS代码：

.image-container {
  background-image: url("your-image-url");
  background-size: cover;
  position: relative;
  width: 300px;
  height: 300px;
}

.image-container::before {
  content: "Your Text Here";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

在上面的代码中，`.image-container`是一个包含图片的容器。使用`background-image`属性将图片作为背景图像放入容器中。然后使用`position: relative`属性让容器成为一个相对定位的块级元素。接下来，使用`::before`伪元素在容器中添加文字。使用`content`属性来添加文本内容。`position: absolute`属性将伪元素的位置设置为相对于父元素的绝对位置。使用`top`和`left`属性将伪元素的位置设置为容器的中心。使用`transform`属性将伪元素向左和向上移动50%。使用`color`属性设置文本的颜色。使用`font-size`属性设置文本的大小。最后，使用`text-align`属性将文本居中对齐。