詳解CSS透明opacity和IE各版本透明度濾鏡filter的最準(zhǔn)確用法

2024-07-11 08:32:23

字體：大中小

供稿：網(wǎng)友

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

首先，Opacity屬性用來設(shè)置一個(gè)元素的透明度，取值范圍是0~1之間，不可為負(fù)值。opacity取值為1是完全不透明，取值為0是完全透明，視覺上看不見。關(guān)于瀏覽器對opacity屬性的兼容性請繼續(xù)往下看：

從Firefox3.5+不再支持私有屬性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用這個(gè)私有屬性的，F(xiàn)irefox 0.9-Firefox3同時(shí)支持-moz-opacity和opacity這兩個(gè)屬性，現(xiàn)在回想起剛?cè)肼殘霾痪媚菚r(shí)候，正好是Firefox升級到3.5之后，一些做好的頁面透明效果突然沒有了，如今已經(jīng)CSS3鋪天蓋地，概嘆時(shí)光荏苒啊。

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

IE8又引入了特殊的-ms-filter，IE認(rèn)為這種寫法是對舊寫法的一次更正，更符合規(guī)范，這個(gè)寫法的屬性值只是多了一對引號，效果同前。不過，這種寫法的壽命也不長，到IE10對filter與-ms-filter都已經(jīng)不再支持。

Safari 1.2之前的版本，是基于khtml的瀏覽器內(nèi)核，1.2版發(fā)布后，不再支持-khtml-opacity的寫法，-khtml-opacity也隨之成為歷史。

Konqueror從未支持過-khtml-opacity，從4.0版本開始已經(jīng)支持opacity。

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

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

語法：

filter : filter

參數(shù)：

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

說明：

1、設(shè)置或檢索對象所應(yīng)用的濾鏡效果。