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
————————————————
版權宣告：本文為CSDN博主「清楓草塘」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/freshlover/article/details/17143341