[分享]css中怎么在图片中加文字

CSS中怎么在图片中加文字 在设计网站时，有时候需要在图片上添加一些文字来达到更好的展示效果。这时候，我们可以利用CSS的``属性来在图片上方或下方添加文字并控制它们的位置。 下面是一个简单的例子： ...

CSS中怎么在图片中加文字 在设计网站时，有时候需要在图片上添加一些文字来达到更好的展示效果。这时候，我们可以利用CSS的`position`属性来在图片上方或下方添加文字并控制它们的位置。 下面是一个简单的例子： HTML代码：

html
<p>这是一张图片：</p>
<img src="example.jpg" alt="示例图片">
<p>这是图片下方的文字。</p> 

CSS代码：

css
p {
  font-size: 18px;
  font-weight: bold;
}

img {
  position: relative;
  display: block;
  margin: 20px auto;
}

img::after {
  content: "这是图片上方的文字";
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  font-weight: normal;
}

p:last-of-type {
  text-align: center;
  margin-top: 20px;
} 

在上面的代码中，我们利用了CSS的伪元素`::after`来添加图片上方的文字。伪元素可以在元素的内容之前或之后添加额外的内容，它们并不是HTML中的真正元素，而是在CSS中创建的。 上面的代码中，我们设置了图片的`position`为`relative`，这样图片就成为了相对定位元素。接着，我们使用`img::after`选择器来选中图片的伪元素，在其中设置了添加的文字内容、文字的位置、颜色、背景色等样式。其中，`top`和`left`属性控制伪元素的位置，`background-color`属性设置文字背景色，并且使用了`rgba()`函数来设置透明度，`font-size`和`font-weight`属性设置文字样式。 如果需要在图片下方添加文字，可以使用类似的方法，将文字添加到``标签之后的`

`元素中，同时调整文字的位置和样式即可。 以上就是在CSS中添加图片上方或下方文字的方法。使用伪元素可以实现更加灵活的布局效果，在实际开发中也可以根据需要对伪元素进行自定义样式的设置。