30

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

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

5 回答 5

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

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

于 2013-06-02T15:46:34.167 回答
6

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

于 2013-06-02T15:46:43.573 回答
2

将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>

你可以看看这个工作示例。

现在，如果我们专门针对您的问题，这里是针对您的问题的工作演示。

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

希望这对现在有帮助。

于 2013-06-02T15:50:41.557 回答
2

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

.social img:hover {
 background-color: rgba(0, 0, 0, .5)
}
于 2013-06-02T17:43:47.113 回答
0

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

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

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

于 2013-06-02T17:00:27.040 回答