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的元素是完全透明的。下面的例子(请确认您的浏览器支持哦):
![css3 rgba](http://www.mxria.com/filepics/2012/02/mZ7tMw.jpg)
其中用到了如下代码:
<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绝对是你领骚风尚的神器!