css 如何设置背景图片的透明度？

作者站长头像
站长
· 阅读数 6

css 如何设置背景图片的透明度？

代码类似：

<div style="background-image:url("/tmp/2.png");">文字要清晰可见</div>

网上了搜了说用

background-color: rgba(255, 255, 255, 0.5);

然而实际并没效果，最后那个数字我即使调到 0 依然没任何效果。

恳请大佬指点，谢谢。

回复
1个回答
avatar
test
2024-06-23

用伪元素代替背景层：

<div class="wrap"></div>
.warp{
  position: relative;
}
.warp:before{
  position: absolute;
  content: "";
  opacity: .6; /*透明度*/
  background-image: url('xxxx');
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容