logo标签列表

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

cssbackgroundpngopacity
31

我有一个PNG文件，我给它的透明区域设置了背景颜色，但我想让背景颜色稍微透明一些，就像不透明度。这是我目前的代码：

social img{
    opacity:0.5;
}
.social img:hover {
    opacity:1;
    background-color:black;
}
5个回答
48
background: rgba(0,0,0,.5);

你可以使用 rgba 来设置透明度，但只能在 IE9 及更高版本的浏览器中生效。

68
可以在已设置的RGB背景颜色基础上仅更改不透明度吗？ - Andres SK
6

使用RGBA的方法是这样的：background-color: rgba(255, 0, 0, .5)

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

希望现在能对你有所帮助。
4
请注意，使用以下类似代码：<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"> </div> 不仅会改变背景，也会改变内容。将上述行更改为以下内容，您将看到不同情况的结果：<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">这里有一些文本</div> - Jelgab
2

在大多数常用浏览器中，使用rgba作为首选颜色格式。

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

我不太确定通过CSS添加不透明度是否是一个好主意。
不透明度有一种奇怪的方式，会应用于您设置的所有内容和子元素，导致颜色混合出现意外的结果。
在我看来，对于背景颜色而言，它没有真正的用途。
如果您想将其悬停在背景图像上，则可以使用多个背景。
这种透明颜色可以通过额外的png重复（或不重复，使用background-position）应用，
CSS渐变（径向-）线性渐变与rgba颜色（起始和结束颜色相同）也可以实现这一点。它们被视为背景图像，并且可以用作过滤器。
对于文本，如果您希望它们稍微透明，请使用rgba（可以将text-shadow放在一起）。

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

如果您好奇混合使用rgba进行不透明度的示例，请访问dabblet.com/gist/5685845

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接