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的浏览器支持情况

上面的数据是通过测试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]-->

4月29日更新：

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

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳。 Follow me on twitter @qianduan。

您或许也会喜欢：

• 7个新鲜的测试浏览器兼容性的简单方法
• Firefox 4 beta 1发布——前端开发者须知
• Opera 10.50 final发布——世界上最快的浏览器
• 让IE6更快的走向灭亡
• 玩转CSS3色彩
• Opera 新版本预览
• Adobe BrowserLab开放注册并发布升级
• 兼容所有浏览器的CSS3圆角
• CSS Overflow 属性
• Firefox 3.5 正式版发布

前端观察QQ群:81307814(已满) 88857174(已满)

前端观察wap版:http://wap.qianduan.net