CSS透明opacity和IE各版本透明度濾鏡filter的最準確用法

CSS3的透明度屬性opacity想必大家都已經用的無處不在了。而對於不支持CSS3的瀏覽器如何進行透明處理，保持瀏覽器效果的一致，這個估計誰都會寫，但是涉及到filter的具體語法含義和各版本寫法的不同區別，很多人都搞不準確，我曾經問過許多羣裏的大牛，說的都不是很準確，網上的說法就更五花八門了。今天呢，主要是重新溫習一下這個屬性，並實際測試來說明正確的寫法，和IE各版本的支持度和書寫區別。

首先，Opacity屬性用來設置一個元素的透明度，取值範圍是0~1之間，不可爲負值。opacity取值爲1是完全不透明，取值爲0是完全透明，視覺上看不見。關於瀏覽器對opacity屬性的兼容性請繼續往下看：

從Firefox3.5+不再支持私有屬性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用這個私有屬性的，Firefox 0.9-Firefox3同時支持-moz-opacity和opacity這兩個屬性，現在回想起剛入職場不久那時候，正好是Firefox升級到3.5之後，一些做好的頁面透明效果突然沒有了，如今已經CSS3鋪天蓋地，概嘆時光荏苒啊。

IE9+纔開始支持CSS3 opacity，而對IE6-IE8我們習慣使用filter濾鏡屬性來進行實現。IE4-IE9都支持濾鏡寫法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

IE8又引入了特殊的-ms-filter，IE認爲這種寫法是對舊寫法的一次更正，更符合規範，這個寫法的屬性值只是多了一對引號，效果同前。不過，這種寫法的壽命也不長，到IE10對filter與-ms-filter都已經不再支持。

Safari 1.2之前的版本，是基於khtml的瀏覽器內核，1.2版發佈後，不再支持-khtml-opacity的寫法，-khtml-opacity也隨之成爲歷史。

Konqueror從未支持過-khtml-opacity，從4.0版本開始已經支持opacity。

除IE外，目前主流瀏覽器 Opera 9.0+，Safari 1.2(WebKit 125) +，chrome等等都支持opacity這個透明度屬性。

IE 從4.0版開始，就提供了一些內置的多媒體濾鏡特效，具體的使用方法是：

語法：

filter : filter

參數：

filter : 　要使用的濾鏡效果。多個濾鏡之間用空格隔開。

說明：

設置或檢索對象所應用的濾鏡效果。
要使用該屬性，對象必須具有height，width，position三個屬性中的一個。
濾鏡的機制是可擴展的。可以開發和使用第三方濾鏡。
該屬性在MAC平臺上不可用。

對應的腳本特性爲filter。

IE4.0以上版本，支持以下14種濾鏡：

濾鏡名說明

Alpha    讓HTML元件呈現出透明的漸進效果
Blur    讓HTML元件產生風吹模糊的效果
Chroma    讓圖像中的某一顏色變成透明色
DropShadow    讓HTML元件有一個下落式的陰影
FlipH    讓HTML元件水平翻轉
FlipV    讓HTML元件垂直翻轉
Glow    在元件的周圍產生光暈而模糊的效果
Gray    把一個彩色的圖片變成黑白色
Invert    產生圖片的照片底片的效果
Light    在HTML元件上放置一個光影
Mask    利用另一個HTML元件在另一個元件上產生圖像的遮罩
Shadow    產生一個比較立體的陰影
Wave    讓HTML元件產生水平或是垂直方向上的波浪變形
XRay    產生HTML元件的輪廓，就像是照X光一樣

Alpha 濾鏡參數詳解

參數名說明取值說明

Opacity    不透明的程度，百分比。   從0到100，0表是完全透明，100表示完全不透明。
FinishOpacity    這是一個同Opacity一起使用的選擇性的參數，當同時Opacity和FinishOpacity時，可以製作出透明漸進的效果，比較酷。   從0到100，0表是完全透明，100表示完全不透明。
Style    當同時設定了Opacity和finishOpacity產生透明漸進時，它主要是用赤指定漸進的顯示形狀。   0：沒有漸進；1：直線漸進；2：圓形漸進；3：矩形輻射。
StartX    漸進開始的 X 座標值
StartY    漸進開始的 Y 座標值
FinishX    漸進結束的 X 座標值
FinishY    漸進結束的 Y 座標值

下面通過一個例子來測試filter和opacity的兼容性：
Html代碼

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="transparent_class">測試透明度</div>
</body>
</html>

注意：測試不要忘了寫DOCTYPE，否則會偏離真實效果。
對應CSS代碼：

.transparent_class {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width:300px;
    height:300px;
    line-height:300px;
    text-align:center;
    background:#000;
    color:#fff;
    /* older safari/Chrome browsers */
    -webkit-opacity: 0.5;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 0.5;
    /* Safari 1.x (pre WebKit!) 老式khtml內核的Safari瀏覽器*/
    -khtml-opacity: 0.5;
    /* IE9 + etc...modern browsers */
    opacity: .5;
    /* IE 4-9 */
    filter:alpha(opacity=50);
    /*This works in IE 8 & 9 too*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /*IE4-IE9*/
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

使用中，我們可以根據要適配的瀏覽器/版本，從上面選擇自己需要的代碼行。如果要全面支持所有瀏覽器，至少需要有關opacity或filter的前5句。

需要聲明的是，如果你要同時使用filter和-ms-filter，請將-ms-filter寫在filter的前面。原文描述如下：

If you want opacity to also work in IE8′s emulating IE7 mode, the order should be:

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first
filter: alpha(opacity=50); // second

If you don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.

基於統計的CSS屬性支持可以參照caniuse網站http://caniuse.com/css-opacity
參考文獻：CSS opacity介紹 https://developer.mozilla.org/en-US/docs/Web/CSS/opacity?redirectlocale=en-US&redirectslug=CSS%2Fopacity