Question

我有一个PNG文件，我给它的透明区域提供了背景颜色，但我想让背景颜色有点透明，就像不透明度一样。到目前为止，这是我的代码：

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

Answer 1

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

你可以使用rgba进行不透明度，只能在ie9 +和更好的浏览器中使用

Answer 2

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

Answer 3

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

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

Answer 4

将 RGB 值与不透明度结合使用，以获得您想要的透明度。

例如，

<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;
}

希望这有助于现在。

Answer 5

不太确定通过CSS添加不透明度是个好主意 Opacity以这种有趣的方式应用于您设置它的所有内容和子项，并且颜色混合出现意外结果。
在我看来，对于bg颜色，它在这种情况下没有真正的目的如果你想将它悬停在bg图像上，那么你可以使用多个背景这种颜色透明可以通过重复的额外png（或不具有背景位置）来应用，
CSS渐变（径向 - ）线性渐变与rgba颜色（以相同颜色开始和结束）也可以实现这一点。它们被视为背景图像，可用作过滤器同意文本，如果你想要它们有点透明，请使用rgba（可以将文本阴影放在一起）。

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

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

如何更改CSS中的背景颜色不透明度

5 个答案: