今天小编跟大家讲解下有关RGBa色彩的浏览器支持分析 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关RGBa色彩的浏览器支持分析 的相关资料，希望小伙伴们看了有所帮助。
RGBa是一种在CSS中声明包含透明效果的颜色的方法 它的语法是这样的复制代码代码如下:div { background: rgba(200, 54, 54, 0.5);}它允许我们为元素添加透明色。或许我们习惯了使用”opacity“ 它很简单易用 但是 opacity会使所有的子元素都变成透明的 而且很难去解决这个问题。（除非使用怪异的定位hack） 跨浏览器透明同样颇为棘手。
通过RGBa 我们可以将一个元素设置为透明 而不会影响其子元素：
声明一个保留颜色并非所有的浏览器支持RGBa 所以如果允许的话 可以声明一个保留色彩。这个色彩应该是可靠的――所有的浏览器都支持。不声明就意味着 在不支持RGBa的浏览器里面 没有使用颜色。复制代码代码如下:div { background: rgb(200, 54, 54); 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支持CFlock 2.0.2支持CBlackBerry 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来源：爱蒂网
