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

武林网(www.vevb.com)文章简介：RGBa是一种在CSS中声明包含透明效果的颜色的方法.

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

123div rgba

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

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

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

1234div rgba</code>

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

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

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浏览器支持条件注释，我们可以抛弃RGB并使用IE的一个私有CSS滤镜来实现同样的效果：

123456789

译自：css-tricks