我可以在CSS参考中看到如何设置图像透明度和如何设置背景图像。但是我如何将这两者结合起来以设置透明的背景图像呢?
我有一张图片，我想用它作为背景，但它太亮了，我想把不透明度降低到0.2左右。我该怎么做呢?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
当前回答
好吧，唯一的CSS方式只做背景透明是通过RGBa，但因为你想使用图像，我建议使用Photoshop或Gimp使图像透明，然后使用它作为背景。
其他回答
简单的解决方案
如果你只需要设置背景图像的渐变:
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);
尝试添加不透明度和背景图像的背景线性渐变。 在这个例子中，我使用了白色背景线性渐变。但你可以使用任何rgba颜色
background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://kusalthiwanka.github.io/images/kusal.jpg");
我也遇到了类似的问题，我只是用photoshop把背景图片用我需要的不透明度创建了一个新的。png。问题解决了，不用担心我的CSS是否在所有设备和浏览器上工作
我刚刚在#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背景。
你可以使用CSS的psuedo选择器::after来实现这一点。这里是一个工作演示。
.bg-container{ width: 100%; height: 300px; border: 1px solid #000; position: relative; } .bg-container .content{ position: absolute; z-index:999; text-align: center; width: 100%; } .bg-container::after{ content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index:-99; background-image: url(https://i.stack.imgur.com/Hp53k.jpg); background-size: cover; opacity: 0.4; } <div class="bg-container"> <div class="content"> <h1>Background Opacity 0.4</h1> </div> </div>
