網頁設計-CSS3教程:在CSS中使用的颜色

CSS3帶來了一些新的處理顏色的方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是，現在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的流覽器完全支持它們。但是我們可以盡我們所能，而IE直到Internet Explorer 9才會開始支援一些CSS3屬性。
Opacity
這其實是一個舊屬性，令人驚奇的是，它被IE的當前版本支持——儘管是以一種比較複雜的方法。
Opacity將整個CSS 物件變透明，所有的子元素的透明度也會適當的繼承。官方的語法如下：
 opacity: [0-1的小數];
所以一個opacity: 0.5;設置會讓對象50%透明。儘管較新的流覽器積極的支援它，老的流覽器還是需要一些定制的代碼，就像IE流覽器一樣。
目前較老的Firefox版本，我們需要使用-moz-首碼，而對於舊的Safari/Chrome版本，我們需要使用-webkit-首碼。而對於更老的還在使用KHTML內核而不是webkit內核的Safari版本來說，我們需要使用-khtml-。那麼如果我們想支持每一個流覽器，我們的代碼應該是這樣的：
opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-khtml-opacity: 0.5;
啊，稍等！IE怎麼辦？好吧，IE的確完全不支持這個，但是它使用了一個私有的濾鏡。傳統的方法簡短扼要：
filter:alpha(opacity=50);
請注意對於IE我們需要使用從0到100的整數，而不是像opacity屬性那樣的小數。鬱悶的是，Internet Explorer 8提供了一個新的方法來處理。不要嘗試像另一個那樣記住這個，這是很長的一個：
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
當然，如果你想支援舊的IE流覽器，你將不得不使用上面的那個短的，這也就意味著如果要相容絕大部分流覽器，你需要總共六條CSS語句。
PS：事實上，Safari從1.2版本(2004年)就開始支援opacity屬性了，KHTML內核的Safai基本很難再找到了，而事實上，Konqueror從未支援過-khtml-opacity屬性，所以請不要再使用它(我在翻譯的時候考慮到原文的完整性，所以並沒有對上面的代碼作出修正)。Opera從9.0開始支持CSS3的opacity，而Firefox直到3.5才原生支持opacity。IE8的-ms-再加上filter真是微軟的天才作品啊！不過請注意，如果你要同時使用filter和-ms-filter，請注意將-ms-filter寫在filter的前面。