如何在 CSS 中更改背景颜色的不透明度 [重复]答案

【问题标题】：How to change the background colour's opacity in CSS [duplicate]如何在 CSS 中更改背景颜色的不透明度 [重复]
【发布时间】：2013-05-28 21:00:38
【问题描述】：

我有一个 PNG 文件，我为它的透明区域赋予了背景颜色，但我想让背景颜色有点透明，比如不透明度。到目前为止，这是我的代码：

social img{
    opacity:0.5;
}
.social img:hover {
    opacity:1;
    background-color:black;
}

【问题讨论】：

标签： css background png opacity

【解决方案1】：

使用 rgba，因为大多数常用的浏览器都支持它..

.social img:hover {
 background-color: rgba(0, 0, 0, .5)
}

【讨论】：

【解决方案2】：

不太确定通过 CSS 添加不透明度是个好主意。
不透明度具有一种有趣的方式，可以应用于您设置它的所有内容和子项，并在混合颜色时产生意想不到的结果。
在我看来，在这种情况下，对于背景颜色来说，它没有真正的目的。
如果您想将其悬停在背景图像上，则可以使用多个背景。
这种透明颜色可以通过重复的额外 png 应用（或不使用背景位置），
CSS 渐变 (radial-) linear-gradient with rgba colors （以相同的颜色开始和结束） 也可以实现这一点。它们被视为背景图像，可用作过滤器。
文本同上，如果您希望它们有点透明，请使用 rgba（可以将文本阴影放在一起）。

我认为今天，我们可以放弃 CSS 不透明度的有趣行为。

如果你好奇，这里是用于不透明度的 rgba 混合 dabblet.com/gist/5685845

【讨论】：

【解决方案3】：

将 RGB 值与 opacity 结合使用以获得所需的透明度。

例如，

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;">&nbsp;</div>

同样，对于没有不透明度的实际值，将给出以下结果。

<div style=" background: rgb(243, 191, 189) ; ">&nbsp;</div>
<div style=" background: rgb(246, 143, 142) ; ">&nbsp;</div>
<div style=" background: rgb(249, 95 , 94)  ; ">&nbsp;</div>
<div style=" background: rgb(252, 47, 47)   ; ">&nbsp;</div>
<div style=" background: rgb(255, 0, 0)     ; ">&nbsp;</div>

你可以看看这个WORKING EXAMPLE。

现在，如果我们专门针对您的问题，这里是WORKING DEMO SPECIFIC TO YOUR ISSUE。

HTML

<div class="social">
    <img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" />
</div>

CSS：

social img{
    opacity:0.5;
}
.social img:hover {
    opacity:1;
    background-color:black;
    cursor:pointer;
    background: rgb(255, 0, 0) ; opacity: 0.5;
}

希望这对现在有帮助。

【讨论】：

请注意，使用类似的东西：

不仅会改变背景，还会内容。把上面这行改成这个，你会看到情况：
Some text here

【解决方案4】：

像这样使用RGBA：background-color: rgba(255, 0, 0, .5)

【讨论】：

【解决方案5】：

background: rgba(0,0,0,.5);

您可以使用 rgba 进行不透明度，仅适用于 ie9+ 和更好的浏览器

【讨论】：

是否可以使用已设置的 rgb 背景颜色更改不透明度？