Css 我可以在同一属性中设置背景图像和不透明度吗？

我可以在CSS中看到引用和。但是我如何结合这两种方法来设置一个透明的背景图像呢

我有一个图像，我想作为背景使用，但它太亮了-我想把不透明度降低到0.2左右。我该怎么做

#主{
背景图片：url（/wp content/uploads/2010/11/tandem.jpg）；
}

好吧，CSS唯一一种只做背景透明度的方法是通过RGBa但是由于你想使用图像，我建议使用Photoshop或Gimp使图像透明，然后将其用作背景。

两种方法：

转换为PNG并使原始图像不透明度为0.2

（更好的方法）有一个

，即

位置：绝对

在

#main

之前，高度与

#main

相同，然后应用背景图像和

不透明度：0.2；过滤器：α（不透明度=20）

#主{
位置：相对位置；
}
#主：之后{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
左：0；
背景图片：url（/wp content/uploads/2010/11/tandem.jpg）；
宽度：100%；
身高：100%；
不透明度：0.2；
z指数：-1；
}

当我遇到这篇文章时，我也遇到了同样的问题，然后我想，当你可以轻松地在Photoshop中调整不透明度时，为什么还要乱用css、调整值和点击刷新？复制图像，将其粘贴为新层，然后移动不透明度滑块。

具有1个div且没有透明图像的解决方案：

您可以使用multibackground CSS3功能并放置两个背景：一个带有图像，另一个带有透明面板（因为我认为无法直接设置背景图像的不透明度）：

您不能使用

rgba（255255255,0.5）

，因为它只在背面接受，所以我在本例中为每个浏览器使用了生成的渐变（这就是为什么它如此长的原因）。但概念如下：

background: tranparentColor, url("myImage"); 

---

我也遇到了类似的问题，我只是用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);

---

我使用了@Dan Eastwell的答案，效果非常好。该代码与他的代码相似，但有一些附加内容

.granddata{
位置：相对位置；
左边距：0.5%；
右边距：0.5%；
}
.granddata：之后{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
左：0；
背景图片：url（“/Images/blabla.jpg”）；
宽度：100%；
身高：100%；
不透明度：0.2；
z指数：-1；
背景重复：无重复；
背景位置：中心；
背景附件：固定；
}

在CSS中添加

 filter: opacity(50%);

在JavaScript使用中

 element.style.filter='opacity(50%)';

---

注意：根据需要添加供应商前缀，但不添加Chromium也可以。

我看到了这一点，在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;
}

---

我刚刚在#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}

---

我将背景应用于main之前的一个div。

对于一个简单的图像来说，一个很好的方法是只使用CSS来设置HTML元素的背景，就像这样

HTML{
背景：url（'http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
宽度：100%；
身高：100%；
}

您可以使用CSS psuedo selector:：after来实现这一点。这里是一个工作演示

.bg容器{
宽度：100%；
高度：300px；
边框：1px实心#000；
位置：相对位置；
}
.bg容器.content{
位置：绝对位置；
z指数：999；
文本对齐：居中；
宽度：100%；
}
.bg容器：：之后{
内容：“；
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
z指数：-99；
背景图片：url(https://i.stack.imgur.com/Hp53k.jpg);
背景尺寸：封面；
不透明度：0.4；
}

背景不透明度0.4

我也有类似的问题。我有一张图片，想降低透明度，在图片后面有一个黑色背景。我没有降低不透明度或创建黑色背景或任何二次div，而是在一行上为图像设置线性渐变：

---

背景：线性渐变（到底部，rgba（0,0,0,0.8）0%，rgba（0,0,0,0.8）100%），url（“/img/picture.png”）尝试添加不透明度和背景图像的背景线性渐变。
在本例中，我使用白色背景线性渐变。但您可以使用任何rgba颜色

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

这是不正确的，有一个CSS3声明：
opactiy:1，不仅仅是RGBa。他说的是在容器上设置
背景图像
样式，然后在同一元素上设置
不透明度
样式。这也将使该内容的文本和其他内容透明。如果你不相信我，试试这个：从IE8上生成的内容，使用IE8的筛选器属性。我在CSS中添加了一个“z-index:-1”。这样，背景图像会受到不透明度的影响，而不是#main的其余内容。我使用
：before
而不是
：after
，然后我就不必修改
z-index
，因为
：before
会自动位于主内容下方。（目前在Chrome和FF中测试。）@KajMagnus如果你这样做，那么之后的一切都不会显示出来。尝试将不透明度设置为1.0，你就会明白我的意思。如果你得到的是重复的背景图像，你可能需要添加
背景
background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://kusalthiwanka.github.io/images/kusal.jpg");