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

Question

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

代码类似：

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

网上了搜了说用

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

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

恳请大佬指点，谢谢。

Answer 1

用伪元素代替背景层：

<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;
}

Answer 2

background-image: url() 不支持透明度，实在不行的话，用 position:absolute 来做吧。

Answer 3

你可以在div下垫一个image标签，给image标签设置opacity透明度就好了，楼上说的用伪元素也是一个不错的方案。