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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3