[分享]css中如何在图片中添加文字

在网页设计中，经常需要在图片上添加文字来丰富页面的内容。在 CSS 中，可以使用伪元素 ::before 和 ::after 来实现这一效果。首先，我们需要在 HTML 代码中添加图片和文本的容器。例...

在网页设计中，经常需要在图片上添加文字来丰富页面的内容。在 CSS 中，可以使用伪元素 ::before 和 ::after 来实现这一效果。
首先，我们需要在 HTML 代码中添加图片和文本的容器。例如：

<div class="image-container">
  <img src="image.jpg" alt="My Image">
  <p>这是我的图片</p>
</div> 

接着，在 CSS 中，我们可以通过以下代码添加文字到图片上：

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

.image-container::before {
  content: attr(data-text); /* 使用data-text属性的值作为伪元素内容 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 1.2em; /* 文字大小 */
  font-weight: bold; /* 文字加粗 */
  color: white; /* 文字颜色 */
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.image-container p {
  display: none; /* 隐藏原有文字，只保留图片 */
} 

在上述代码中，我们首先给容器设置了 position: relative，然后在容器的伪元素 ::before 中，使用 content 属性将 data-text 属性的值作为伪元素的内容。接着，将伪元素的位置设置为绝对定位，并使用 top 和 left 充满整个容器。最后，设置文字样式，使其与图片相似。
完整的代码如下：

<div class="image-container" data-text="这是我的图片">
  <img src="image.jpg" alt="My Image">
  <p>这是我的图片</p>
</div>

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

.image-container::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: white;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.image-container p {
  display: none;
}
</style> 

这样，我们就可以在图片上添加自定义的文字了。如果需要修改文字，只需要修改 data-text 属性的值即可。