利用CSS在图片中添加文字

要在图片上添加文字，可以使用CSS的::after伪元素或者::before伪元素，并将它们的content属性设置为需要显示的文本内容。同时，需要设置position属性为absolute或relative以确定文本的位置。

以下是一个简单的例子：

HTML:

<div class="image-container">
  <img src="image.jpg" alt="示例图片">
</div>

CSS:

.image-container {
  position: relative;
  display: inline-block; /* 或者其他的块级或行内块级元素 */
}
 
.image-container img {
  display: block; /* 避免底部空白 */
  width: 100%; /* 或者其他宽度设置 */
}
 
.image-container::after {
  content: '这里是文字';
  position: absolute;
  top: 0; /* 可以调整位置 */
  left: 0; /* 可以调整位置 */
  color: white; /* 文字颜色 */
  font-size: 20px; /* 文字大小 */
}

在这个例子中，.image-container是一个包含图片的容器，图片本身是容器的子元素。::after伪元素被用来在图片上添加文本。position属性设置为absolute使得文本可以自由地在图片上任意定位。content属性包含你想要显示的文本。可以通过调整top、left、right和bottom属性来控制文本的精确位置。