（转载）CSS3学习之风骚RGBA

realic

浏览: 17800 次
性别:
来自: 上海

最近访客更多访客>>

chmine

wxm22

zhang85836131

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS3

css3 RGBA

CSS3学习之风骚RGBA
作者：夜飞羽来源：mxria.com 时间：2012-02-28

大部分时候，我们为了获得良好的视觉效果，只能在网页中大量使用图片，特别是各种透明变幻、叠加的效果，非图片不风骚。如今，CSS3带给广大的开发者更方便的领骚工具：RGBa！什么是RGBa？它是一种在CSS中声明包含透明效果的颜色的方法，它的语法是这样的：
div {
background: rgba(200, 54, 54, 0.5);
}
它允许我们为元素添加透明色。RGBA，顾名思义就是R+G+B+A，再具体点就是RED+GREEN+BLUE+ALPHA，翻译一下就是红+绿+蓝+Alpha透明的颜色。跟其他RGB颜色的区别就是多了一个A，就是我们可以设置透明效果，一个字母赋予了我们神一般的力量。
或许我们习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，而且很难去解决这个问题。通过RGBa，我们可以将一个元素设置为透明，而不会影响其子元素。RGBA像RGB一样设置颜色，而这个”A”——RGBA中的最后一个值——许可我们设置该元素的透明度。就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。下面的例子(请确认您的浏览器支持哦)：

www.mxria.com

其中用到了如下代码：
<div style="background: rgba(200, 54, 54, 0.1);width:400px;">www.mxria.com</div>
其中，表示半透明度的0.1前面的0是可以省掉的，直接.1也是可以的。该值依次增加，直到完全不透明成为实色。事实上，RGBA跟RGB一样，可以使用到任何需要颜色的地方，比如为DIV区块设置半透明的边框，例如
div {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
border: 10px solid rgba(255, 255, 255, 0.3);
}
可以设置鼠标滑过时DIV发生变化，例如：
div {
color: rgba(255, 255, 255, 0.8);
background-color: rgba(142, 213, 87, 0.3);
}
div:hover{
color: rgba(255, 255, 255, 1);
background-color: rgba(142, 213, 87, 0.6);
}

如果加上JS的支持，你可以创意出各种各样变幻无穷的交互效果，是不是感觉拥有一大神器？但别高兴太早，IE低版本还是不给力，尽管IE8号称给予了支持，但实际上不给力。目前浏览器的支持情况如下（来自某个神奇人物的总结，最新的支持情况请到w3c官网了解）：
浏览器、版本、平台结果后备
IE 4.01 无作用没有颜色
IE 5.5 (PC via IETester) 无作用没有颜色
IE 6 (PC via IETester) 无作用实色
IE 7 无作用实色
IE 8 无作用实色
IE 9 支持
Firefox 3.6 (OS X) 作用 —
Firefox 3.0.5 (OS X) 作用 —
Firefox 3.0.5 (Windows XP, Vista) 作用 —
Firefox 2.0.0.18 (PC) 无作用实色
Safari 4 (Developer Preview & 4.0.4, OS X) 作用 —
Safari 3.2.1 (OS X, Windows XP) 作用 —
Mobile Safari (iPhone) 作用 —
Opera 9.6.1 无作用实色
Opera 10 Beta (Linux & Windows) 作用 —
Opera 10.10 (OS X) 作用 —

Google Chrome 0.4.154.33 (Windows XP) 作用 —
Google Chrome 1.0.154.46 (Windows XP) 作用 —
Google Chrome 4.0.249.49 (OS X) 作用 —
Netscape 4.8 (PC) 无作用没有颜色
Navigator 9.0.0.5 Linus 无作用实色
SeaMonkey 1.1.14 无作用没有颜色
SeaMonkey 2.0 作用 —
Sunrise 1.7.5 作用 —
Stainless 0.2.5 作用 —
Flock 1.2.7 无作用实色
Flock 2.0.2 作用 —
BlackBerry Storm Browser 作用 —
Camino 1.6.6 无作用实色
Camino 2.0b1 作用 —
Iceape 1.1.14 (Linux) 无作用实色
Kazehakase 0.5.2 (Linux) 无作用实色
Avant 11.7 (Windows XP) 无作用实色

正如上表所展示的，IE8及其以下都对实用的rgba颜色不支持，怎么办呢？接下来我们谈谈RGBA的高级应用。
1）低版本兼容
可以使用如下重定义的形式来解决
DIV{
color: rgb(127, 127, 127);
color: rgba(0, 0, 0, 0.5);
}
先设置rgb颜色在设置rgba颜色，这样不支持rgba属性的浏览器只会显示rgb颜色，而支持rgba的浏览器因为重定义的作用会显示rgba颜色。
2）背景使用png透明图片替代
div{
background: transparent url(black50.png);
background: rgba(0, 0, 0, 0.5) none;
}

相同透明度的PNG背景达到了和rgba一样的效果。当然，这得使用PS等图片编辑软件的支持。
3）针对IE，一个让你无法发嗲的货，怎么办？
IE6和IE7可以用IE的私用属性来解决，但只可以达到部分和rgba一样的效果。
div {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#80000000', EndColorStr='#80000000');
}
注意StartColorStr和EndColorStr的值，前两位是十六进制的透明度，后面六位是十六进制的颜色。
二者再来一次重定义，就可以解决兼容性问题。
div{background:rgba(0,0,0,0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#80000000,endcolorstr=#80000000);
}

关于FILTER:progid:DXImageTransform.Microsoft.Gradient
最简单的使用如下：

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=i#AARRGGBB)

startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
　　其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 – FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
　　取值范围为 #FF000000 – #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。

总结：CSS3很多新特性，可以让开发人员风骚无比，可以不用再去找美工MM修改图片了，而是自己通过代码就获得很多漂亮的效果。只要你够嗲够骚，CSS3绝对是你领骚风尚的神器！

分享到：