RGBa色彩的浏览器支持

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

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

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

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

声明一个保留颜色

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

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

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

RGBa的浏览器支持情况

浏览器,版本,操作系统测试结果退路
Firefox 3.0+支持
Firefox 2.0-不支持纯色
webkit -safari 3.x+支持
webkit -safari 2.0-不支持
Mobile Safari (iPhone/iPod Touch /iPad)支持
opera 10.x+支持
Opera 9.x-不支持纯色
IE 5.5 -不支持无色
IE 6-8不支持纯色
IE 9支持
Google Chrome 所有版本支持
Netscape 所有版本不支持没有颜色
SeaMonkey 1.1.x不支持无色
SeaMonkey 2.0 +支持
BlackBerry Storm Browser支持
上面的数据是通过测试demo得到的,该测试页面包含了更多更完整的浏览器兼容性列表。

对IE浏览器的更好的退路

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

4月29日更新:

经过神飞测试发现,RGBa颜色可以用于border,不过,不同的浏览器对于border的RGBa支持不太一样,不过唯一的不同是,FF在border的拐角处会出现叠加,比如透明度是0.4,那么在FF中,四个角的透明度会变成0.8,而支持RGBa的非FF浏览器不会出现这种情况。

2011.04.13更新:更新了浏览器支持列表

译自:[css-tricks](http://css-tricks.com/rgba-browser-support/) 原文:[RGBa色彩的浏览器支持及其兼容性解决方案](http://www.qianduan.net/rgba-browser-support-compatibility.html "RGBa色彩的浏览器支持及其兼容性解决方案") 版权所有,转载请注明出处,多谢。