css在img上添加文字

在我们的网页中经常会有各种图片的出现，有时候我们需要在图片上增加一些文字来说明图片内容，这时候我们可以使用CSS来实现在图片上添加文字的功能。

在HTML中实现图片显示我们通常使用img标签，如下代码所示：

<img src="image.jpg" alt="图片">

在这个img标签中添加文字，我们可以用CSS的:before和:after伪元素来实现。我们可以为img标签添加一个类，如下：

<img src="image.jpg" alt="图片" class="img-text">

CSS代码如下：

.img-text:before {
  content: "这里是文字";
  position: absolute;
  top: 50px;
  left: 50px;
  color: white;
  font-size: 24px;
  font-weight: bold;
}

在这个CSS代码中，我们为.img-text类的:before伪元素添加了content属性，这个属性就是我们想要添加的文字内容，我们也可以在这里添加其他内容，如img标签的alt属性等。

下面是其他几个常用的CSS属性解释：

• position: absolute;可以让添加的文字在图片中绝对定位
• top: 50px;和left: 50px;可以定位文字的位置，不同的top和left值会让文字在图片中不同的位置
• color: white;和font-size: 24px;可以改变文字的颜色和大小
• font-weight: bold;可以让文字加粗

通过CSS的:before和:after伪元素，我们可以实现在图片上添加文字的效果。这种方法不仅方便简便，而且还可以优化代码和减少冗余。