如何利用css在图片上填充文字

要在图片上填充文字，你可以使用 CSS 的伪元素 `::after` 或 `::before` 来实现。下面是一种常用的方法：

HTML:

<div class="image-container">
  <img src="image.jpg" alt="Image">
  <div class="text-overlay">
    <span>填充的文字</span>
  </div>
</div>

CSS:

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

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-overlay span {
  color: white;
  font-size: 24px;
  text-align: center;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

在上述示例中，`.image-container` 是包含图片和文本覆盖层的容器。通过设置 `.image-container` 的 `position: relative;`，使得 `.text-overlay` 可以相对于它进行定位。

`.text-overlay` 是一个绝对定位的覆盖层，通过设置它的 `top: 0; left: 0; width: 100%; height: 100%;`，使它填充整个容器。

`.text-overlay span` 是用于显示填充的文字的元素。你可以根据需要调整文字的样式，例如颜色、字体大小等。

通过调整 `.text-overlay span` 的 `background-color` 属性，你可以改变文本覆盖层的背景色。

这样，你就可以在图片上填充文字，并通过 CSS 控制文本覆盖层的样式。