CSS实现透明效果颜色的方法:RGBa

RGBa是一种在CSS中声明包含透明效果的颜色的方法，它的语法是这样的：

 

1 2 3

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

它允许我们为元素添加透明色。或许我们习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，而且很难去解决这个问题。（除非使用怪异的定位hack） 跨浏览器透明同样颇为棘手。

通过RGBa，我们可以将一个元素设置为透明，而不会影响其子元素：

声明一个保留颜色

并非所有的浏览器支持RGBa，所以如果允许的话，可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持。不声明就意味着，在不支持RGBa的浏览器里面，没有使用颜色。

1 2 3 4

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

不过，这条退路在某些古董级浏览器中依然无效。

RGBa的浏览器支持情况

浏览器，版本，操作系统 测试结果 退路

Firefox 3.0.5 (OS X, Windows XP, Vista)	支持	—
Firefox 2.0.0.18 (PC)	不支持	纯色
Safari 4 (Developer Preview, Mac)	支持	—
Safari 3.2.1 (PC)	支持	—
Mobile Safari (iPhone)	支持	—
Opera 9.6.1	不支持	纯色
IE 5.5 (PC via IETester)	不支持	无色
IE 6 (PC via IETester)	不支持	纯色
IE 7	不支持	纯色
IE 8 beta 2	不支持	纯色
Google Chrome 1.0.154.43	支持	—
Google Chrome 1.0.154.46	支持	—
Netscape 4.8 (PC)	不支持	没有颜色
SeaMonkey 1.1.14	不支持	无色
SeaMonkey 1.1.16	不支持	纯色
SeaMonkey 2.0 beta3	支持	—
Sunrise 1.7.5	支持	—
Stainless 0.2.5	支持	–
Flock 2.0.2	支持	–
BlackBerry Storm Browser	支持	纯色
Camino 1.6.6	不支持	纯色

上面的数据是通过测试demo得到的，该测试页面包含了更多更完整的浏览器兼容性列表。

对IE浏览器的更好的退路

因为IE浏览器支持条件注释，我们可以抛弃RGB并使用IE的一个私有CSS滤镜来实现同样的效果：

1 2 3 4 5 6 7 8 9

<!--[if IE]> <style type="text/css"> .color-block { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); zoom: 1; } </style> <![endif]-->