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.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滤镜来实现同样的效果:

复制代码
代码如下:

<!--[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浏览器不会出现这种情况。

译自:css-tricks

以上就是RGBa色彩的浏览器支持分析。爱情,本就是件宁缺勿滥的事,急不得。有爱情,便全心对待,没有爱情,也一个人惬意。更多关于RGBa色彩的浏览器支持分析请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
CSS3中如何使用RGBa来调节透明度的好代码教程

CSS3 RGBA色彩模式如何使用实例讲解

CSS3中如何使用RGBA设置透明度的示例

CSS3的RGBA中一篇关于整数和百分比值的转换

有关opacity或RGBA设置颜色值及元素的透明值