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

在CSS中，我们可以很方便地对文字进行样式设置，比如改变字体、大小、颜色等等。但是，有时候我们也希望能在文字下面添加一张图片，比如说在文章中插入一幅图表或者插入一个小图标作为装饰，更好地展示文章内容。...

在CSS中，我们可以很方便地对文字进行样式设置，比如改变字体、大小、颜色等等。但是，有时候我们也希望能在文字下面添加一张图片，比如说在文章中插入一幅图表或者插入一个小图标作为装饰，更好地展示文章内容。那么，究竟该如何在CSS中实现在文字下面添加图片呢？
其实，实现这个效果非常简单，只需要使用CSS中的code标签和:before伪元素即可。具体实现方式如下：
1.首先，需要将要添加图片的文字放到p标签中，如下所示：

<p>这是一段要添加图片的文字。</p> 

2.接下来，在CSS样式表中设置这个p标签的position属性为relative，这是为了让后面的:before伪元素能够依据这个位置进行定位。代码如下：

p {
  position: relative;
} 

3.然后，设置:before伪元素的display属性为block，并设置其宽、高、背景颜色、边框和定位等属性。在这里，我们将宽度设置为文字宽度的两倍，将高度设置为20像素，背景色为灰色，边框颜色为白色，定位为absolute，并将其bottom属性设置为"-10px"，这是为了使图片正好出现在文字下面。代码如下：

p::before {
  content: "";
  display: block;
  width: 200%;
  height: 20px;
  background-color: gray;
  border: 1px solid white;
  position: absolute;
  bottom: -10px;
} 

4.最后，在:before伪元素中插入一张图片，使用background-image属性即可。这里我们将一张小图标作为例子。代码如下：

p::before {
  content: "";
  display: block;
  width: 200%;
  height: 20px;
  background-color: gray;
  border: 1px solid white;
  position: absolute;
  bottom: -10px;
  background-image: url("icon.png");
  background-repeat: no-repeat;
  background-position: center center;
} 

至此，我们的效果已经实现了！一个漂亮的、带有图片的文字块就出现在页面中了。完整的代码如下：

<style>
p {
  position: relative;
}

p::before {
  content: "";
  display: block;
  width: 200%;
  height: 20px;
  background-color: gray;
  border: 1px solid white;
  position: absolute;
  bottom: -10px;
  background-image: url("icon.png");
  background-repeat: no-repeat;
  background-position: center center;
}
</style>

<p>这是一段要添加图片的文字。</p> 

希望我的这篇文章对你有所帮助，如果你有任何疑问或者建议，欢迎在评论区留言。