CSS透明opacity和IE各版本透明度濾鏡filter最準確的用法
- 高洛峰原創
- 2017-02-25 14:43:501720瀏覽
CSS3的透明度屬性opacity想必大家都已經使用的無所不在了。而對於不支援CSS3的瀏覽器如何進行透明處理，保持瀏覽器效果的一致,本篇文章主要介紹了詳解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 : 要使用的濾鏡效果。多個濾鏡之間用空格隔開。
說明：
1、設定或擷取物件所套用的濾鏡效果。
2、要使用該屬性，物件必須具有height，width，position三個屬性中的一個。
3、濾鏡的機制是可擴充的。可以開發和使用第三方濾鏡。
4、此屬性在MAC平台上不可用。
5、對應的腳本特性為filter。
IE4.0以上版本，支援以下14種濾鏡：
①、Alpha 讓HTML元件呈現透明的漸進式效果
② 、Blur 讓HTML元件產生風吹模糊的效果
③、Chroma 讓影像中的某一顏色變成透明色
④、DropShadow 使HTML元件有一個下落式的陰影
⑤、FlipH 讓HTML元件水平翻轉
⑥、FlipV 讓HTML元件垂直翻轉
⑦、Glow # 模糊元件的光暈而產生光暈的效果產生光暈的效果
⑧、Gray 把一個彩色的圖片變成黑白色#⑨、Invert 產生圖片的照片底片的效果⑩、Light 在HTML⑩、Light 在HTML
#⑪、Mask 利用另一個HTML元件在另一個元件上產生影像的遮罩
⑫、Shadow 產生一個比較立體的陰影
⑬、Wc 產生一個比較立體的陰影⑬、Wc 或是垂直方向上的波浪變形
⑭、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 座標值 #o
# 結束值#⑦、FinishY 漸進結束的Y 座標值 以下透過一個例子來測試filter和opacity的相容性：Html程式碼<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <p class="transparent_class">测试透明度</p> </body> </html>#
.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);
}
Html程式碼
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first filter: alpha(opacity=50); // second
注意：測試不要忘了寫DOCTYPE，否則會偏離真實效果。
對應CSS程式碼：
rrreee#使用中，我們可以根據要適應的瀏覽器/版本，從上面選擇自己需要的程式碼行。如果要全面支援所有瀏覽器，至少需要有關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:
rrreeeIf you don't use this order, IE8 emulating IE7 doesn't apply the opacity, although IE8 and IE7 native do.
####以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援PHP中文網。 ######更多CSS透明opacity和IE各版本透明度濾鏡filter的最準確用法相關文章請關注PHP中文網！ ###