我也遇到过类似的问题。我有一张图片，想要降低透明度，并在图片后面设置一个黑色背景。而不是减少不透明度或创建黑色背景或任何二级div，我设置了一个线性渐变的图像在一行:

背景:0、0、0、0、8)0%、rgba(0、0、0、0、0、0、0、0、0、0、0。

在CSS中添加…

 filter: opacity(50%);

在JavaScript中使用…

 element.style.filter='opacity(50%)';

注:根据需要添加供应商前缀，但铬应该没有。

我看到了这个，在CSS3中，你现在可以像这样放置代码。假设我想让它覆盖整个背景，我会这样做。然后使用hsla(0,0%，100%，0.70)或rgba，你可以使用白色背景和任意百分比的饱和度或不透明度来获得你想要的效果。

.body{
    background-attachment: fixed;
    background-image: url(../images/Store1.jpeg);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: hsla(0,0%,100%,0.70);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
}

我遇到了这篇文章，因为我有同样的问题，然后我想，当你可以很容易地在Photoshop中调整不透明度时，为什么要乱用css，调整值和点击刷新呢?复制图像，将其粘贴为新图层，然后移动不透明度滑块。

尝试添加不透明度和背景图像的背景线性渐变。 在这个例子中，我使用了白色背景线性渐变。但你可以使用任何rgba颜色

background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://kusalthiwanka.github.io/images/kusal.jpg");

#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}