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

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