我可以在CSS参考中看到如何设置图像透明度和如何设置背景图像。但是我如何将这两者结合起来以设置透明的背景图像呢?
我有一张图片，我想用它作为背景，但它太亮了，我想把不透明度降低到0.2左右。我该怎么做呢?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
当前回答
我刚刚在#main中添加了position=absolute,top=0,width=100%，并设置不透明度为#background
#main{height:100%;position:absolute; top:0;width:100%}
#background{//same height as main;background-image:url(image URL);opacity:0.2}
我在主元素之前应用了一个div背景。
其他回答
我遇到了这篇文章，因为我有同样的问题，然后我想，当你可以很容易地在Photoshop中调整不透明度时，为什么要乱用css，调整值和点击刷新呢?复制图像，将其粘贴为新图层，然后移动不透明度滑块。
我也遇到了类似的问题，我只是用photoshop把背景图片用我需要的不透明度创建了一个新的。png。问题解决了，不用担心我的CSS是否在所有设备和浏览器上工作
简单的解决方案
如果你只需要设置背景图像的渐变:
background-image: url(IMAGE_URL); /* fallback for older browsers */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);
#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;
}
我看到了这个，在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;
}
