CSS3之旅:RGBa颜色

在CSS3中,RGBa 为颜色声明添加Alpha通道。这对于设计师来说是个非常好的消息,他们现在可以在单个元素上声明一个Alpha通道的百分比了。

对介绍不太感兴趣?直接看演示吧

为什么不是opacity?

Opacity 已经被所有主流浏览器所支持了,尽管要使用不同的代码。

/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
/* IE5 - 7 */
filter: alpha(opacity=50);  
/* Everyone else */
opacity: .5;  

那么你为什么还要哭鼻子呢?这个问题是,如果你在一个元素上设置了opacity ,那就意味着该元素的所有子元素也会被应用同样的设置……所以控制opacity实现非常棒的细节是颇为麻烦的事情的。你不能完全使用它,或者不得不借助于JavaScript.

RGBa前来营救

基于CSS 颜色模型第三版RGBA 颜色允许界面设计师为独立元素设置一个alpha通道。

RGB值被指定使用3个8位无符号整数(0 – 255)并分别代表红色、蓝色、和绿色。增加的一个alpha通道并不是一个颜色通道——它只是用来指定除其它三个通道提供的颜色信息之外的透明度。

这样我们就可以这样实现:

RGBa example

使用下面的HTML

<ul>  
    <li class="hundred">100%</li>
    <li class="eighty">80%</li>
    <li class="sixty">60%</li>
    <li class="forty">40%</li>
    <li class="twenty">20%</li>
</ul>  

以及CSS

ul{list-style: none}  
ul li{padding:.5em}  
ul li.hundred{background:rgba(0,0,255,1)}  
ul li.eighty{background:rgba(0,0,255,0.8)}  
ul li.sixty{background:rgba(0,0,255,0.6)}  
ul li.forty{background:rgba(0,0,255,0.4)}  
ul li.twenty{background:rgba(0,0,255,0.2)}  

语法小计

CSS 2.1 开发人员可能更喜欢用16进制色彩(例如#ccc) ,这在我的印象中,是用的最广泛的色彩声明。CSS2.1 支持RGB 色彩声明,然而:

/* Hex value */
#yourid {color:#46d5de}
 /* The same as a RGB colour declaration */
#yourid {color:rgb(70,213,222)}

CSS3 RGBa 颜色采用了在语法上的一个很微小的改动:

#yourid {color:rgba(70,213,222,0.5)} 

注意,浏览器对”color:rgb” 和”color:rgba” 是分开处理的。

浏览器支持

RGBa颜色现在在Webkit 和Gecko 核心的浏览器被支持,IE各个版本的浏览器和Opera还都不支持。就像Chris在他关于RGBa的精彩的文章里 提到的,你可以使用一个标准的RGB颜色为那些不支持的浏览器指定一个向下兼容的属性。

div {  
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

另一个渐进增强或适度降级的例子。

Demo

你可以通过这个demo页面查看实际效果,或者通过Github下载源代码


原文:CSS3之旅:RGBa颜色
译自:http://shapeshed.com
版权所有,转载请注明出处,谢谢。