教你玩轉(zhuǎn)CSS3色彩

傳統(tǒng)來說，大家在CSS中使用的顏色要么是16進(jìn)制格式，要么是rgb格式，就像rgb(171,205,239)。

CSS3帶來了一些新的處理顏色的方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是，現(xiàn)在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的瀏覽器完全支持它們。但是我們可以盡我們所能，而IE直到Internet Explorer 9才會開始支持一些CSS3屬性。

Opacity

這其實是一個舊屬性，令人驚奇的是，它被IE的當(dāng)前版本支持——盡管是以一種比較復(fù)雜的方法。

Opacity將整個CSS 對象變透明，所有的子元素的透明度也會適當(dāng)?shù)睦^承。官方的語法如下：

所以一個opacity: 0.5;設(shè)置會讓對象50%透明。盡管較新的瀏覽器積極的支持它，老的瀏覽器還是需要一些定制的代碼，就像IE瀏覽器一樣。

目前較老的Firefox版本，我們需要使用-moz-前綴，而對于舊的Safari/Chrome版本，我們需要使用-webkit-前綴。而對于更老的還在使用KHTML內(nèi)核而不是webkit內(nèi)核的Safari版本來說，我們需要使用-khtml-。那么如果我們想支持每一個瀏覽器，我們的代碼應(yīng)該是這樣的：

啊，稍等！IE怎么辦？好吧，IE的確完全不支持這個，但是它使用了一個私有的濾鏡。傳統(tǒng)的方法簡短扼要：

請注意對于IE我們需要使用從0到100的整數(shù)，而不是像opacity屬性那樣的小數(shù)。郁悶的是，Internet Explorer 8提供了一個新的方法來處理。不要嘗試像另一個那樣記住這個，這是很長的一個：

當(dāng)然，如果你想支持舊的IE瀏覽器，你將不得不使用上面的那個短的，這也就意味著如果要兼容絕大部分瀏覽器，你需要總共六條CSS語句。

PS：事實上，Safari從1.2版本(2004年)就開始支持opacity屬性了，KHTML內(nèi)核的Safai基本很難再找到了，而事實上，Konqueror從未支持過-khtml-opacity屬性，所以請不要再使用它(我在翻譯的時候考慮到原文的完整性，所以并沒有對上面的代碼作出修正)。Opera從9.0開始支持CSS3的opacity，而Firefox直到3.5才原生支持opacity。IE8的-ms-再加上filter真是微軟的天才作品啊！不過請注意，如果你要同時使用filter和-ms-filter，請注意將-ms-filter寫在filter的前面。——神飛

譯自：Playing Around with CSS3 Colors
中文：玩轉(zhuǎn)CSS3色彩

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈