繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > RGBa色彩的浏览器支持分析
- CSS样式表
- css ID类和class类的长命名与短命名
- CSS background-position的使用说明详解
- 利用CSS定位背景图片 background-position
- CSS 多图片融合背景定位的应用于优缺点分析
- CSS实现的图片宽高自适应固定边框
- css 背景图片定位在菜单效果中的应用实例
- CSS 速记口诀 可以解决一些常见问题
- CSS 多浏览器兼容性问题及解决方案
- css 行级元素在多浏览器下的宽度问题 与解决方法
- IE下行框高度的问题
- CSS 实现的图片宽高自适应固定边框
- css的核心内容 标准流、盒子模型、浮动、定位等分析
- CSS 超出隐藏实现限制字数的功能代码(多浏览器)
- Div+CSS 布局入门教程之二 构建网站
- CSS 网页布局中文排版的9则技巧
- CSS网页布局25个实用小技巧
- 网页制作 默认Web字体样式
- IE与Firefox的CSS兼容大全 推荐
- css 非表格垂直对齐效果代码
- css cursor 的可选值（鼠标的各种样式）
CSS样式表 中的 RGBa色彩的浏览器支持分析
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-20 浏览: 76 ::
收藏到网摘: n/a
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
评论 (0) All
