RGBa 浏览器支持

RGBa 是一种在 CSS 中声明颜色并包含 Alpha 透明度支持的方式。它看起来像这样

div {
   background: rgba(200, 54, 54, 0.5); 
}

这使我们能够使用透明颜色填充区域；前三个数字表示 RGB 值的颜色，第四个数字表示 0 到 1 之间的透明度值（零表示完全透明，一表示完全不透明）。我们长期以来一直拥有opacity属性，它与此类似，但opacity强制所有后代元素也变得透明，并且无法阻止这种情况（除非使用 奇怪的位置黑客）跨浏览器不透明度 也有些混乱。

使用 RGBa，我们可以使一个盒子透明，同时保留其后代元素

声明备用颜色

并非所有浏览器都支持 RGBa，因此，如果设计允许，您应该声明一个“备用”颜色。此颜色很可能是**纯色**（完全不透明）。不声明备用颜色意味着在不支持它的浏览器中不会应用任何颜色。这种备用颜色在一些非常旧的浏览器中会失效。

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5); 
}

但请注意 此错误，它与在 IE 6 和 7 中不使用简写有关。

RGBa 的浏览器支持

上次更新 05/14/2010

浏览器、版本、平台	结果	备用颜色
Mozilla Firefox 3.x（及更高版本）	有效	—
Mozilla Firefox 2.x（及更低版本）	无效	纯色
Google Chrome（任何版本）	有效	—
WebKit – Safari 3.x（及更高版本）	有效	—
WebKit – Safari 2.x（及更低版本）	无效	—
移动版 Safari（iPhone / iPod Touch / iPad）	有效	—
Opera 10.x（及更高版本）	有效	—
Opera 9.x（及更低版本）	无效	纯色
Internet Explorer 9 预览版	有效	—
Internet Explorer 8（至 6）	无效	纯色
Internet Explorer 5.5（及更低版本）	无效	无颜色
Netscape（任何版本）	无效	纯色
BlackBerry Storm 浏览器	有效	—

数据来自 此演示，其中包含更完整的浏览器兼容性列表。

针对 IE 的更好的备用颜色

由于 IE 支持 条件样式表，因此我们可以使用它们和专有的 Microsoft CSS 过滤器来实现相同的结果

<!--[if IE]>
   
   <style type="text/css">

   .color-block { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
       zoom: 1;
    } 

    </style>

<![endif]-->

更新：正如一些人指出的那样，alpha 值应该是字符串开头的两位数字，而不是结尾的两位数字，因此我已更新了上面的代码以使其正确。（例如，startColorstr=#50990000 而不是 startColorstr=#99000050）

另一个更新：我们已经过了可能不再需要使用过滤器渐变的时期。但尽管如此，显然前两位数字（上面为“50”）不是 50%。您必须使用“十六进制”。正如 Julio Loayza 写给我的那样

rgba(255, 255, 255, 0.5) 不等效于 (startColorstr=#50FFFFFF,endColorstr=#50FFFFFF)
rgba(255, 255, 255, 0.5) 等效于 (startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)

00 为透明，FF 为不透明。以下是完整的映射

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

更多信息

• Tim Kadlec：并非看起来那么清晰：CSS3 不透明度和 RGBA
• Andy Clarke：CSS3 RGBa 是否已准备好震撼？
• Lea Verou：PHP 库，用于创建具有 Alpha 透明度的 PNG 文件，用作 RGBa 的备用方案。

其他示例

颜色变化

无需记住或查找大量不同的十六进制灰度值，您只需使用 RGBa 将纯黑色调整到适合的阴影，例如 rgba(0, 0, 0, 0.3); 也就是说，假设透明度对于任何应用程序来说都很酷（非常适合阴影，不适合文本）。当然也不必是黑色，您可以通过这种方式创建整个单色配色方案。

此外，如果您需要通过代码手动调整颜色，则 HSLa 比 RGBa 更易于使用。