我可以在CSS参考中看到如何设置图像透明度和如何设置背景图像。但是我如何将这两者结合起来以设置透明的背景图像呢?
我有一张图片，我想用它作为背景，但它太亮了，我想把不透明度降低到0.2左右。我该怎么做呢?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
当前回答
简单的解决方案
如果你只需要设置背景图像的渐变:
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;
}
我用了@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;
}
两种方法:
转换为PNG，使原始图像的透明度为0.2 (更好的方法)有一个<div>， position: absolute;在#main之前，高度与#main相同，然后应用background-image，不透明度:0.2;过滤器:α(不透明度= 20);。
尝试添加不透明度和背景图像的背景线性渐变。 在这个例子中，我使用了白色背景线性渐变。但你可以使用任何rgba颜色
background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://kusalthiwanka.github.io/images/kusal.jpg");
我也遇到过类似的问题。我有一张图片，想要降低透明度，并在图片后面设置一个黑色背景。而不是减少不透明度或创建黑色背景或任何二级div，我设置了一个线性渐变的图像在一行:
背景:0、0、0、0、8)0%、rgba(0、0、0、0、0、0、0、0、0、0、0。
