如何在 CSS 中更改背景颜色的不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16884398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the background colour's opacity in CSS
提问by Alex Jj
I have a PNG file which I give a background colour to its transparent areas, but I would like to make the background colour a bit transparent, like opacity. Here is my code so far:
我有一个 PNG 文件，我为其透明区域提供背景颜色，但我想让背景颜色有点透明，如不透明度。到目前为止，这是我的代码：
social img{
opacity:0.5;
}
.social img:hover {
opacity:1;
background-color:black;
}
回答by bob
background: rgba(0,0,0,.5);
you can use rgba for opacity, will only work in ie9+ and better browsers
您可以将 rgba 用于不透明度，仅适用于 ie9+ 和更好的浏览器
回答by bookcasey
回答by Mohd. Umar
Use rgba as most of the commonly used browsers supports it..
使用 rgba，因为大多数常用浏览器都支持它。
.social img:hover {
background-color: rgba(0, 0, 0, .5)
}
回答by Nitesh
Use RGBvalues combined with opacityto get the transparency that you wish.
将RGB值与不透明度结合使用以获得所需的透明度。
For instance,
例如，
<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"> </div>
Similarly, with actual values without opacity, will give the below.
同样，没有不透明度的实际值，将给出以下。
<div style=" background: rgb(243, 191, 189) ; "> </div>
<div style=" background: rgb(246, 143, 142) ; "> </div>
<div style=" background: rgb(249, 95 , 94) ; "> </div>
<div style=" background: rgb(252, 47, 47) ; "> </div>
<div style=" background: rgb(255, 0, 0) ; "> </div>
You can have a look at this WORKING EXAMPLE.
你可以看看这个工作示例。
Now,if we specifically target your issue, here is the WORKING DEMO SPECIFIC TO YOUR ISSUE.
现在，如果我们专门针对您的问题，这里是针对您的问题的具体工作演示。
The HTML
HTML
<div class="social">
<img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" />
</div>
The CSS:
CSS：
social img{
opacity:0.5;
}
.social img:hover {
opacity:1;
background-color:black;
cursor:pointer;
background: rgb(255, 0, 0) ; opacity: 0.5;
}
Hope this helps Now.
希望这对现在有帮助。
回答by G-Cyrillus
Not too sure to add opacity via CSS is such a good idea.
Opacity has that funny way to be applied to all content and childs from where you set it, with unexpected results in mixed of colours.
It has no really purpose in that case , for a bg color, in my opinion.
If you'd like to lay it hover the bg image, then you may use multiple backgrounds.
this color transparent could be applyed via an extra png repeated (or not with background-position),
CSS gradient (radial-)linear-gradient with rgba colors (starting and ending with same color)can achieve this as well. They are treated as background-image and can be used as filter.
Idem for text, if you want them a bit transparent, use rgba (okay to put text-shadow together).
不太确定通过 CSS 添加不透明度是个好主意。
Opacity 有一种有趣的方式可以应用于您设置它的所有内容和子项，并在混合颜色中产生意想不到的结果。
在我看来，在这种情况下，对于 bg 颜色，它没有真正的目的。
如果您想将其悬停在 bg 图像上，那么您可以使用多个背景。
这种颜色透明可以通过重复的额外 png（或不使用背景位置）来应用，带有 rgba 颜色（以相同颜色开始和结束）的
CSS 渐变（径向）线性渐变也可以实现这一点。它们被视为背景图像，可以用作过滤器。
文本同上，如果您希望它们有点透明，请使用 rgba（可以将 text-shadow 放在一起）。
I think that today, we can drop funny behavior of CSS opacity.
我认为今天，我们可以放弃 CSS 不透明度的有趣行为。
Here is a mixed of rgba used for opacity if you are curious dabblet.com/gist/5685845
如果您好奇，这里是用于不透明度的混合 rgba dabblet.com/gist/5685845
