如何使用CSS给一个区域的背景加透明度

githubcurry

于 2022-01-17 22:00:22 发布

阅读量1.5k

点赞数 3

分类专栏： css 文章标签： css css3 前端背景透明度

本文链接：https://blog.csdn.net/weixin_45277161/article/details/122549363

版权

css 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种在CSS中仅使背景图片透明而不影响文字内容透明度的方法。通过使用伪元素并设置适当的CSS属性，可以轻松实现背景透明效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们是无法直接给区域透明度的，这样会改变本来的文字等内容的透明度，我们只能通过伪元素来实现。单纯的在CSS中无法直接给背景图片加 opacity 属性，我们可以使用下面的方法来实现仅仅背景透明的效果：

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}