傳統(tǒng)來(lái)說(shuō)，大家在CSS中使用的顏色要么是16進(jìn)制格式（如#990000），要么是rgb格式（如rgb(171,205,239)）。CSS3帶來(lái)了一些全新色彩表現(xiàn)和處理方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。但現(xiàn)在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的瀏覽器完全支持它們，據(jù)說(shuō)IE瀏覽器要等到IE9才會(huì)開(kāi)始支持一些CSS3屬性。

　　HSLA

　　當(dāng)然，HSLA 就是HSL 的擴(kuò)展，就像RGBa一樣，添加了第四個(gè)透明參數(shù)。使用HSLA就像RGBa一樣簡(jiǎn)單，僅僅在那里貼上額外的參數(shù)就OK了：div {background: hsla(30, 50%, 80%, 0.5);}HSLA被大部分瀏覽器支持，包括Safari 3.2+、Chrome、Firefox，IE不支持，和HSL不同的是，Opera9.6并不支持HSLA，直到Opera 10才開(kāi)始支持HSLA。

　　HSL

　　HSL是一個(gè)選擇顏色的很直觀的方法。如果你需要“再暗一點(diǎn)點(diǎn)兒” 或 “再亮一點(diǎn)點(diǎn)兒”，使用十六進(jìn)制組合會(huì)頗麻煩吧。幸運(yùn)的是，通過(guò)HSL，它就是僅僅一個(gè)簡(jiǎn)單的數(shù)字改變。HSL代表Hue(色調(diào)、也稱(chēng)“色相”)、Saturation(飽和度)和Lightness(明度)。Hue就是一個(gè)色盤(pán)中的顏色(參考上圖)。色彩選擇通過(guò)度數(shù)來(lái)確定，0o 就是紅色，120o 是綠色，而240o 就是藍(lán)色。當(dāng)然，你可以選擇中間的不同的色彩組合，這樣你就有這些：Saturation(飽和度)是該色彩被使用了多少。0%表示灰度，也就是我們并沒(méi)有使用這個(gè)顏色，而100%表示該顏色很飽滿。通俗的講，飽和度就是顏色的深淺程程度，鮮艷程度Lightness(明度)也就是該色彩有多亮。較低設(shè)置意味著暗，較高設(shè)置意味著亮，0% 和100%意味著分別為黑和白。所以，一個(gè)使用橙色的50%飽和度+50%名都的背景的對(duì)象看起來(lái)就像這樣：

　　div {background: hsl(30, 50%, 80%);}

　　RGBa

　　下面讓我們討論一下RGBa。RGBa是對(duì)原始的RGB的擴(kuò)展，它加入了第四個(gè)參數(shù)：alpha通道。alpha通道參數(shù)采用0 到1之間的小數(shù)，就像opacity那樣。使用RGBa而不是opacity的優(yōu)勢(shì)是，當(dāng)使用RGBa的時(shí)候，透明不會(huì)被應(yīng)用到子元素。這也就一位著，你可以在一個(gè)透明對(duì)象里面使用一個(gè)完全不透明的子對(duì)象，而當(dāng)你使用opacity的時(shí)候，透明對(duì)象的子元素也是透明的。

　　div {

　　background: rgb(255,0,0); /* The old one */

　　background: rgba(255,0,0,0.5); /* The new one */

　　}

　　Opacity

　　這其實(shí)是一個(gè)舊屬性，令人驚奇的是，它被IE的當(dāng)前版本支持--盡管是以一種比較復(fù)雜的方法。Opacity將整個(gè)CSS 對(duì)象變透明，所有的子元素的透明度也會(huì)適當(dāng)?shù)睦^承。官方的語(yǔ)法如下：opacity: [0-1的小數(shù)];所以一個(gè)opacity: 0.5;設(shè)置會(huì)讓對(duì)象50%透明。盡管較新的瀏覽器積極的支持它，老的瀏覽器還是需要一些定制的代碼，就像IE瀏覽器一樣。