Css3 RGBa(颜色+透明度)

在css3中增加了一个RGBa的颜色属性。

RGB对于学过css的同志都知道它代表红色R(red)+绿色G(green)+蓝色B(blue),是定义颜色的。

那么RGBA是在rgb的基础上添加了一个a,这个a代表Alpha通道,也就是增加了一个透明度。

A的属性:从1到0,1表示不逗明,0表示完全透明,0.8表示透明80%,0.5表示透明50% ...

我们来看下边的css代码:

上述代码表示:颜色值是(255,0,0),透明度是80%。


另外提前css透明度,大家可能一下会想到opacity 这个属性,在css2中,我们如果设置背景颜色等透明度的时候都会用到这个属性。

opacity和Rgba区别

1)opacity是css2中的属性,Rgba是css3中新增的属性

2)Rgba比opacity更简洁方便

我们来对比一下,比如我们同时定义一个明为.box的css样式,指定背景颜色和透明度。(背景颜色:红色,透明度:70%)

opacity中 Rgba中

3)opacity的缺点
opacity属性的斗名都会被子元素同时继承,比如我们给一个div设置了背景颜色透明,但是在这个div下边的子元素,比如文字,图片等元素也同时会被设置成透明。这样非常的不灵活。
但是RGBA就不会出现这样的问题,rgba设置的透明度只会针对该元素,而不会影响其它子元素。这点很好。
我简单做了一下对比,如下图:

opacity和rgba对比

上图中,我们发现他们的相同之处就是背景颜色及背景透明度完全一样,但是用opactiy属性设置的透明度同时也对其下的子元素文字也跟着一起透明了,如上图中的文字“100%,80%,60%”等字样也跟着透明了。但是Rgba定义下的文字(0.8,0.6)等字样没有跟着一起透明。

4)Rgba的劣势
尽管上边我们说了很多Rgba的优势,但是还是有很明显的缺点,就是ie浏览器的兼容性很差,ie浏览器从ie9(包含ie9及ie9以上版本,ie9以下版本均不支持)才开始支持rgba,火狐和google chrome对Rgba的支持非常好,但是用ie浏览器的人还是占最大比例。

说一句题外话:我知道做前端的人最头疼的是浏览器的兼容性,在这里我也想说一句“去年买了个表,该死的兼容性”

支持rgba的浏览器:
Chrome 0.4.154.33+ , Firefox 3.0+ , Safari 3.2.1+ , Opera 10.10+ , IE9+(包含ie9)

 

Views: 1,451 Tags: , ,
飞鱼

发表评论

电子邮件地址不会被公开。 必填项已用*标注