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

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瀏覽器一樣。

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

opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-khtml-opacity: 0.5;

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

filter:alpha(opacity=50);

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

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

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

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

本文章由南寧網(wǎng)站建設(shè)、南寧網(wǎng)站優(yōu)化、南寧網(wǎng)絡(luò)公司整理，轉(zhuǎn)載請(qǐng)注明出處：http://www.yu-168.cn/