如何赋予背景图像不透明度

Question

这是我设置背景的css代码

.faq{
    background-image: url('faq_bg.jpg');
}

如何在不改变背景颜色的不透明度的情况下更改此背景图像的不透明度

Answer 1

您可以尝试使用伪元素伪造背景不透明度，因为没有这样的属性。

.faq::after {
  content: "";
  background: url('faq_bg.jpg');
  opacity: 0.5;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;   
}

Answer 2

可悲的是你不能这样做。还没有办法改变图像的不透明度。一个选项是使用一个具有背景颜色的元素，另一个元素位于顶部（或伪元素）与您的图像（和不透明度）

即

parent{
  background-color:#something;
  position:relative;
}

child{
  positon:absolute;
  top:0;
  left:0;
  background-image:url([etc])
  opacity:0.4;
}