[分享]css中如何把文字放在图片上

在网页设计中，有时候需要把一些文字放在图片上面，这样可以让页面更加丰富有趣。这样的效果可以使用CSS来实现。下面就来介绍如何实现在图片上面放置文字。/先定义图片样式/ img { : relative...

在网页设计中，有时候需要把一些文字放在图片上面，这样可以让页面更加丰富有趣。这样的效果可以使用CSS来实现。下面就来介绍如何实现在图片上面放置文字。

/*先定义图片样式*/
img {
  position: relative;
}

/*添加文字样式*/
img::before {
  position: absolute;
  content: "文字内容";
  font-size: 24px;
  color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  box-sizing: border-box;
} 

上面的代码中，先定义了图片的样式，使用了position:relative属性，这样就可以使用绝对定位来放置文字。接着在img元素的::before伪元素中添加文字的样式。::before伪元素可以在元素之前插入内容，这里使用content属性定义了要插入的文本内容。

接下来，使用了绝对定位，通过bottom和left属性定义了文字的位置，使用了width属性和padding属性设置了文字的宽度和内边距。最后通过background-color属性设置了文字的背景色，并使用了rgba()函数来实现半透明效果。

这样在图片上添加文字就完成了。需要注意的是，如果图片大小发生改变，需要重新调整文字样式。