快速业务通道

CSS实现透明效果颜色的方法:RGBa

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03

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

浏览器,版本,操作系统 测试结果 退路
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 不支持 纯色

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号