我可以在CSS参考中看到如何设置图像透明度和如何设置背景图像。但是我如何将这两者结合起来以设置透明的背景图像呢?
我有一张图片，我想用它作为背景，但它太亮了，我想把不透明度降低到0.2左右。我该怎么做呢?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
当前回答
我也遇到过类似的问题。我有一张图片，想要降低透明度，并在图片后面设置一个黑色背景。而不是减少不透明度或创建黑色背景或任何二级div，我设置了一个线性渐变的图像在一行:
背景:0、0、0、0、8)0%、rgba(0、0、0、0、0、0、0、0、0、0、0。
其他回答
1 div和无透明图像的解决方案:
你可以使用多背景CSS3特性，放两个背景:一个是图片，另一个是透明面板(因为我认为没有办法直接设置背景图片的不透明度):
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
您不能使用rgba(255,255,255,0.5)，因为单独使用它只在后面被接受，所以在本例中，我为每个浏览器都使用了生成的梯度(这就是为什么它这么长)。但是概念是这样的:
background: tranparentColor, url("myImage");
http://jsfiddle.net/pBVsD/1/
在CSS中添加…
filter: opacity(50%);
在JavaScript中使用…
element.style.filter='opacity(50%)';
注:根据需要添加供应商前缀，但铬应该没有。
我遇到了这篇文章，因为我有同样的问题，然后我想，当你可以很容易地在Photoshop中调整不透明度时，为什么要乱用css，调整值和点击刷新呢?复制图像，将其粘贴为新图层，然后移动不透明度滑块。
我也遇到了类似的问题，我只是用photoshop把背景图片用我需要的不透明度创建了一个新的。png。问题解决了，不用担心我的CSS是否在所有设备和浏览器上工作
#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;
}
