13518219792
這篇文章將為大家詳細(xì)講解有關(guān)CSS透明opacity和IE各版本透明度濾鏡filter怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
在滕州等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣,成都外貿(mào)網(wǎng)站制作,滕州網(wǎng)站建設(shè)費(fèi)用合理。
CSS3的透明度屬性opacity想必大家都已經(jīng)用的無(wú)處不在了。而對(duì)于不支持CSS3的瀏覽器如何進(jìn)行透明處理，保持瀏覽器效果的一致，這個(gè)估計(jì)誰(shuí)都會(huì)寫(xiě)，但是涉及到filter的具體語(yǔ)法含義和各版本寫(xiě)法的不同區(qū)別，很多人都搞不準(zhǔn)確，我曾經(jīng)問(wèn)過(guò)許多群里的大牛，說(shuō)的都不是很準(zhǔn)確，網(wǎng)上的說(shuō)法就更五花八門(mén)了。今天呢，主要是重新溫習(xí)一下這個(gè)屬性，并實(shí)際測(cè)試來(lái)說(shuō)明正確的寫(xiě)法，和IE各版本的支持度和書(shū)寫(xiě)區(qū)別。
首先，Opacity屬性用來(lái)設(shè)置一個(gè)元素的透明度，取值范圍是0~1之間，不可為負(fù)值。opacity取值為1是完全不透明，取值為0是完全透明，視覺(jué)上看不見(jiàn)。關(guān)于瀏覽器對(duì)opacity屬性的兼容性請(qǐng)繼續(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è)肼殘?chǎng)不久那時(shí)候，正好是Firefox升級(jí)到3.5之后，一些做好的頁(yè)面透明效果突然沒(méi)有了，如今已經(jīng)CSS3鋪天蓋地，概嘆時(shí)光荏苒啊。
IE9+才開(kāi)始支持CSS3 opacity，而對(duì)IE6-IE8我們習(xí)慣使用filter濾鏡屬性來(lái)進(jìn)行實(shí)現(xiàn)。IE4-IE9都支持濾鏡寫(xiě)法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
IE8又引入了特殊的-ms-filter，IE認(rèn)為這種寫(xiě)法是對(duì)舊寫(xiě)法的一次更正，更符合規(guī)范，這個(gè)寫(xiě)法的屬性值只是多了一對(duì)引號(hào)，效果同前。不過(guò)，這種寫(xiě)法的壽命也不長(zhǎng)，到IE10對(duì)filter與-ms-filter都已經(jīng)不再支持。
Safari 1.2之前的版本，是基于khtml的瀏覽器內(nèi)核，1.2版發(fā)布后，不再支持-khtml-opacity的寫(xiě)法，-khtml-opacity也隨之成為歷史。
Konqueror從未支持過(guò)-khtml-opacity，從4.0版本開(kāi)始已經(jīng)支持opacity。
除IE外，目前主流瀏覽器 Opera 9.0+，Safari 1.2(WebKit 125) +，chrome等等都支持opacity這個(gè)透明度屬性。
IE 從4.0版開(kāi)始，就提供了一些內(nèi)置的多媒體濾鏡特效，具體的使用方法是：
語(yǔ)法：
filter : filter
參數(shù)：
filter : 要使用的濾鏡效果。多個(gè)濾鏡之間用空格隔開(kāi)。
說(shuō)明：
1、設(shè)置或檢索對(duì)象所應(yīng)用的濾鏡效果。
2、要使用該屬性，對(duì)象必須具有height，width，position三個(gè)屬性中的一個(gè)。
3、濾鏡的機(jī)制是可擴(kuò)展的。可以開(kāi)發(fā)和使用第三方濾鏡。
4、該屬性在MAC平臺(tái)上不可用。
5、對(duì)應(yīng)的腳本特性為filter。
IE4.0以上版本，支持以下14種濾鏡：
①、Alpha 讓HTML元件呈現(xiàn)出透明的漸進(jìn)效果
②、Blur 讓HTML元件產(chǎn)生風(fēng)吹模糊的效果
③、Chroma 讓圖像中的某一顏色變成透明色
④、DropShadow 讓HTML元件有一個(gè)下落式的陰影
⑤、FlipH 讓HTML元件水平翻轉(zhuǎn)
⑥、FlipV 讓HTML元件垂直翻轉(zhuǎn)
⑦、Glow 在元件的周?chē)a(chǎn)生光暈而模糊的效果
⑧、Gray 把一個(gè)彩色的圖片變成黑白色
⑨、Invert 產(chǎn)生圖片的照片底片的效果
⑩、Light 在HTML元件上放置一個(gè)光影
?、Mask 利用另一個(gè)HTML元件在另一個(gè)元件上產(chǎn)生圖像的遮罩
?、Shadow 產(chǎn)生一個(gè)比較立體的陰影
?、Wave 讓HTML元件產(chǎn)生水平或是垂直方向上的波浪變形
?、XRay 產(chǎn)生HTML元件的輪廓，就像是照X光一樣
Alpha 濾鏡參數(shù)詳解
①、Opacity 不透明的程度，百分比。 從0到100，0表是完全透明，100表示完全不透明。
②、FinishOpacity 這是一個(gè)同Opacity一起使用的選擇性的參數(shù)，當(dāng)同時(shí)Opacity和FinishOpacity時(shí)，可以制作出透明漸進(jìn)的效果，比較酷。 從0到100，0表是完全透明，100表示完全不透明。
③、Style 當(dāng)同時(shí)設(shè)定了Opacity和finishOpacity產(chǎn)生透明漸進(jìn)時(shí)，它主要是用赤指定漸進(jìn)的顯示形狀。 0：沒(méi)有漸進(jìn)；1：直線漸進(jìn)；2：圓形漸進(jìn)；3：矩形輻射。
④、StartX 漸進(jìn)開(kāi)始的 X 坐標(biāo)值
⑤、StartY 漸進(jìn)開(kāi)始的 Y 坐標(biāo)值
⑥、FinishX 漸進(jìn)結(jié)束的 X 坐標(biāo)值
⑦、FinishY 漸進(jìn)結(jié)束的 Y 坐標(biāo)值
下面通過(guò)一個(gè)例子來(lái)測(cè)試filter和opacity的兼容性：
Html代碼
