這篇彙總主要是提供一些(xiē)CSS不透明(míng)的詳細介紹，代碼示例和(hé)解釋，以實現這項有(yǒu)用的CSS技(jì)術(shù)在您的項目中兼容所有(yǒu)浏覽器(qì)。

關于CSS 透明(míng)度，有(yǒu)一點需要注意的是，它雖然使用了很(hěn)多(duō)年，但(dàn)它一直以來(lái)都不是一個(gè)标準屬性。它是一種非标準技(jì)術(shù)，應該是CSS3規範的一部分。

一、舊(jiù)的Opacity設置

以下代碼是Firefox和(hé)Safari舊(jiù)版本所需的透明(míng)度設置:

#myElement {
-khtml-opacity: .5; 
-moz-opacity: 0.5;  }

-khtml-opacity設置是針對舊(jiù)版本的Webkit渲染引擎，這種專用屬性現在已經過時(shí)了，除非你(nǐ)還(hái)有(yǒu)需要兼容Safari 1.x.的用戶。

第二行(xíng)使用專用屬性 -moz-opacity是 為(wèi)了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。Firefox 0.9以後就不要求使用-moz-opacity屬性，Firefox 3.5（現在使用Gecko引擎）已經不在支持這個(gè)屬性。

二、在Firefox, Safari, Chrome和(hé)Opera下的CSS透明(míng)度

以下代碼是除了IE外的所有(yǒu)當前浏覽器(qì)的最簡單，最最新的不透明(míng)度設置的CSS語法：

#myElement { opacity: .7; }

上(shàng)述語法将設置一個(gè)元素為(wèi)70％不透明(míng)（或30%透明(míng)）。設置opacity:1将使元素不透明(míng)，而設置opacity:0将使得(de)元素完全不可(kě)見。你(nǐ) 隻要記住“opacity”等同于“不透明(míng)”就很(hěn)容易記住了，opacity值越小(xiǎo)就越接近透明(míng)。

opacity屬性可(kě)以精确地小(xiǎo)數(shù)點後兩位，所以值取“.01”和(hé)“.02”實際上(shàng)是不同的，雖然可(kě)見度很(hěn)難被發覺。一般情況下，精确到一位就可(kě)以了，取值如“.3”或“.7”。

三、IE下的CSS透明(míng)度

IE下照舊(jiù)有(yǒu)别于其他浏覽器(qì)，并且目前也有(yǒu)三個(gè)不同版本的IE在廣泛使用，透明(míng)度設置是不同的，有(yǒu)時(shí)需要額外的CSS來(lái)控制(zhì)：

#myElement { filter: alpha(opacity=40); }

上(shàng)面的CSS使用專用的filter屬性來(lái)設置IE6-8透明(míng)度。對于IE6和(hé)IE7需要注意：為(wèi)了使得(de)透明(míng)設置生(shēng)效，元素必須是“有(yǒu)布局”。一個(gè)元素可(kě)以通(tōng)過使用一些(xiē)CSS屬性來(lái)使其被布局，有(yǒu)如width 和(hé) position。關于微軟專有(yǒu)的hasLayout屬性詳情，以及如何觸發它，可(kě)以參考52CSS.com相關文檔。

另外一個(gè)設置IE8的CSS透明(míng)度的方法語法如下（注意注釋中指出的版本）：

#myElement {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);     
/* 第一行(xíng)在IE6, IE7和(hé)IE8下有(yǒu)效 */     
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";    
/*第二行(xíng)僅在IE8下有(yǒu)效 */}

第一行(xíng)代碼針對當前所有(yǒu)IE版本，第二行(xíng)僅針對IE8。

注意兩行(xíng)代碼的不同之處：在第二行(xíng)代碼中，在filter屬性前跟着-ms-前綴，并且屬性值有(yǒu)加引号，這些(xiē)都是語法所必須的。

說實在，有(yǒu)了如前一個(gè)例子中用alpha(opacity=40)的語法來(lái)作(zuò)用于任何版本的IE下的任何有(yǒu)布局的元素之後，我也不确定是否還(hái)有(yǒu)必要用“progid”的方法。

四、使用JavaScript設置和(hé)改變CSS透明(míng)度

您可(kě)以使用下面的語法訪問JavaScript中的CSS opacity 屬性：

document.getElementById("myElement").style.opacity = ".4";  
// 針對所有(yǒu)現代浏覽器(qì) 
document.getElementById("myElement").style.filter = "alpha(opacity=40)";
// 針對IE

上(shàng)面的代碼可(kě)以使用行(xíng)內(nèi)循環或者其他動态函數(shù)遞增修改透明(míng)度的值。當然，你(nǐ)必須先通(tōng)過特征檢測來(lái)決定使用哪一行(xíng)代碼。

五、使用JQuery設置和(hé)改變CSS透明(míng)度

直接使用jQuery設置CSS透明(míng)度更直觀更容易實現，因為(wèi)在所有(yǒu)浏覽器(qì)代碼都一樣，并且你(nǐ)不必擔心在IE下元素是否“haslayout”：

$("#myElement").css({ opacity: .4 }); // 所有(yǒu)浏覽器(qì)有(yǒu)效

您也可(kě)以使用一下jQuery代碼使一個(gè)元素動畫(huà)透明(míng)：

$("#myElement").animate({opacity: .4}, 1000, function() {     
// 動畫(huà)完成，所有(yǒu)浏覽器(qì)下有(yǒu)效  });

不管元素的透明(míng)度在動畫(huà)開(kāi)始時(shí)是多(duō)少(shǎo)，它都會(huì)漸變到透明(míng)度為(wèi)“.4”。動畫(huà)的速度通(tōng)過值“1000”設定，動畫(huà)時(shí)間(jiān)以毫秒(miǎo)為(wèi)單位。代碼中的最後一個(gè)屬性是一個(gè)可(kě)選回調函數(shù)，将在動畫(huà)完成後執行(xíng)。

如果該元素的透明(míng)度在CSS中已經設定為(wèi)“.4”，那(nà)在動畫(huà)運行(xíng)的時(shí)候，你(nǐ)将不會(huì)發覺有(yǒu)任何不同，所以動畫(huà)開(kāi)始和(hé)最終透明(míng)度要有(yǒu)所不同。

六、通(tōng)過RGBA的透明(míng)度

另一個(gè)CSS3技(jì)術(shù)隻支持部分新的浏覽器(qì)（Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+），可(kě)通(tōng)過RGBA的alpha通(tōng)道(dào)的方式設定。語法如下：

#rgba {background: rgba(98, 135, 167, .4);}

在上(shàng)面的定義中，通(tōng)過RGB（前三個(gè)數(shù)字）給背景設定顔色，然後最後一個(gè)是alpha設置，以執行(xíng)給定顔色的透明(míng)度。這個(gè)alpha設置跟opacity 屬性一樣，可(kě)設定任何0到1的數(shù)字，精确得(de)到兩位小(xiǎo)數(shù)點。數(shù)字值越大(dà)，就越接近完全不透明(míng)的顔色。

七、通(tōng)過 HSLA的透明(míng)度

類似之前的定義，CSS3還(hái)允許使用HSLA單獨設置顔色和(hé)alpha值，HSLA表示Hue（色調）, Saturation（飽和(hé)度）, Lightness（亮度）, 和(hé)Alpha。以下是HSLA透明(míng)的例子：

#hsla {background: hsla(207, 38%, 47%, .4);}

更多(duō)關于HSLA顔色的解釋，參考這篇來(lái)自W3.org的文章。如同RGBA透明(míng)度，最後的數(shù)字表示透明(míng)度設置，跟RGBA起同樣的作(zuò)用。注意RGBA和(hé)HSLA透明(míng)度的一個(gè)重要的好處是這些(xiē)透明(míng)度設置不會(huì)影(yǐng)響到子元素的，但(dàn)通(tōng)過opacity屬性的方式則會(huì)。alpha設置的RGBA和(hé)HSLA隻影(yǐng)響背景顔色的透明(míng)度，僅此而已。