css3.0搶先看(七)：HSL和HSLA,RGBA全新的定義顔色方法

文章來自www.css3s.cn

 象十六進制和RGB定義顔色一樣，css3還支援HSL（色調，飽和度，亮度）的定義方式。既然采用hsl的方式，那就應該有三個參數值：

hue(色調)：0(或360)表示紅色，120表示綠色，240表示藍色，當然可取其他數值來确定其他顔色。

Saturation（飽和度）：取值為0%到100%之間的值。

Lightness（亮度）：取值為0%到100%之間的值。

到目前為止，支援的浏覽器有Opera 9.5, Safari 3, Konqueror 和 Mozilla 。

書寫格式如下：

background-color: hsl(0,100%, 50%); 

background-color: hsl(240,100%, 50%);

background-color: hsl(120,100%, 50%);      

HSLA就是在HSL的基礎上多了個控制alpha透明度的參數，取值在0到1之間，格式如下：      

background-color: hsl(0,100%, 50%,0.2);

background-color: hsl(240,100%, 50%,0.4);

background-color: hsl(120,100%, 50%,0.8);      

RGBA和HSLA的類似，是在RGB的基礎上多了個控制alpha透明度的參數，取值在0到1之間，格式如下：      

background-color: rgba(255, 0, 0,0.2);

background-color: rgba(255, 0, 0,0.4);

background-color: rgba(255, 0, 0,0.8);      
   

此外，直接用opacity定義顔色透明度，示例如下：      

background-color: hsl(0,100%, 50%); opacity 0.2;

background-color: hsl(240,100%, 50%); opacity 0.2;

background-color: hsl(120,100%, 50%); opacity 0.2;      
   

有了這些全新的顔色定義方法，以後我們定義顔色時就可以更靈活了。      

文章來自www.css3s.cn