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

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

好吧，唯一的CSS方式只做背景透明是通过RGBa，但因为你想使用图像，我建议使用Photoshop或Gimp使图像透明，然后使用它作为背景。

我用了@Dan Eastwell的答案，效果很好。该代码与他的代码类似，但增加了一些内容。

.granddata {
    position: relative;
    margin-left :0.5%;
    margin-right :0.5%;
}
.granddata:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("/Images/blabla.jpg");
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
}

我也遇到过类似的问题。我有一张图片，想要降低透明度，并在图片后面设置一个黑色背景。而不是减少不透明度或创建黑色背景或任何二级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%)';

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

两种方法:

转换为PNG，使原始图像的透明度为0.2 (更好的方法)有一个<div>， position: absolute;在#main之前，高度与#main相同，然后应用background-image，不透明度:0.2;过滤器:α(不透明度= 20);。