|
譯自：Playing Around with CSS3 Colors
中文：玩轉(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才會(huì)開始支持一些CSS3屬性。
Opacity
這其實(shí)是一個(gè)舊屬性，令人驚奇的是，它被IE的當(dāng)前版本支持——盡管是以一種比較復(fù)雜的方法。
Opacity將整個(gè)CSS 對(duì)象變透明，所有的子元素的透明度也會(huì)適當(dāng)?shù)睦^承。官方的語法如下：
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版本來說，我們需要使用-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)的方法簡短扼要：
filter:alpha(opacity=50);
請(qǐng)注意對(duì)于IE我們需要使用從0到100的整數(shù)，而不是像opacity屬性那樣的小數(shù)。郁悶的是，Internet Explorer 8提供了一個(gè)新的方法來處理。不要嘗試像另一個(gè)那樣記住這個(gè)，這是很長的一個(gè)：
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
當(dāng)然，如果你想支持舊的IE瀏覽器，你將不得不使用上面的那個(gè)短的，這也就意味著如果要兼容絕大部分瀏覽器，你需要總共六條CSS語句。
PS：事實(shí)上，Safari從1.2版本(2004年)就開始支持opacity屬性了，KHTML內(nèi)核的Safai基本很難再找到了，而事實(shí)上，Konqueror從未支持過-khtml-opacity屬性，所以請(qǐng)不要再使用它(我在翻譯的時(shí)候考慮到原文的完整性，所以并沒有對(duì)上面的代碼作出修正)。Opera從9.0開始支持CSS3的opacity，而Firefox直到3.5才原生支持opacity。IE8的-ms-再加上filter真是微軟的天才作品啊！不過請(qǐng)注意，如果你要同時(shí)使用filter和-ms-filter，請(qǐng)注意將-ms-filter寫在filter的前面�！耧w
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 下一頁 玩轉(zhuǎn)CSS3色彩 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 玩轉(zhuǎn)CSS3色彩 [1]
第 2 頁 
