CSS濾鏡雖然只能在IE瀏覽器中表現(xiàn)出效果，但是仍不失為網(wǎng)頁(yè)增加特效的好辦法。
?
1． CSS靜態(tài)濾鏡樣式 （filter）
CSS靜態(tài)濾鏡樣式的使用方法：{ filter : filtername( parameters1, parameters2, ...) }
?
Filter樣式 簡(jiǎn)要說(shuō)明 支持參數(shù)
alpha 設(shè)置圖片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength
blur 在指定的方向和位置上產(chǎn)生動(dòng)感模糊效果 add、direction、strength
chroma 對(duì)所選擇的顏色進(jìn)行透明處理 color
dropShadow 在指定的方向和位置上產(chǎn)生陰影 color、offX、offY、positive
flipH 沿水平方向翻轉(zhuǎn)對(duì)象
flipV 沿垂直方向翻轉(zhuǎn)對(duì)象
glow 在對(duì)象周?chē)习l(fā)光 color、strength
gray 將對(duì)象以灰度處理
invert 逆轉(zhuǎn)對(duì)象顏色
light 對(duì)對(duì)象進(jìn)行模擬光照
mask 對(duì)對(duì)象生成掩膜 color
shadow 沿對(duì)象邊緣產(chǎn)生陰影 color、direction
wave 在垂直方向產(chǎn)生正弦波形 add、freq、lightStrength、phase、strength
xray 改變對(duì)象顏色深度，并繪制黑白圖象
?
以上就是靜態(tài)濾鏡的全部?jī)?nèi)容， 要注意的是CSS是區(qū)分大小寫(xiě)的！
?
?
2． CSS動(dòng)態(tài)濾鏡
?
動(dòng)態(tài)濾鏡可以為頁(yè)面添加動(dòng)人的淡入淡出、圖象轉(zhuǎn)化效果，它可以分為兩種blend（混合）和reveal（顯示），前者可以使對(duì)象漸漸消失或出現(xiàn)， 后者 提供了24種圖象轉(zhuǎn)化的效果。對(duì)于動(dòng)態(tài)濾鏡的調(diào)用除去象在靜態(tài)濾鏡中要定義的濾鏡類型，參數(shù)等等，還用到腳本語(yǔ)言控制它的狀態(tài)。
?
首先，在開(kāi)始一個(gè)動(dòng)態(tài)效果之前，先需要進(jìn)行裝備（Apply），然后播放（Play）動(dòng)態(tài)效果，在動(dòng)態(tài)效果進(jìn)行中還可以中斷動(dòng)態(tài)效果（Stop），以上可以用下面的方法實(shí)現(xiàn)：
?
對(duì)象名.filters(濾鏡數(shù)值).Apply()
對(duì)象名.filters(濾鏡數(shù)值).Play()
對(duì)象名.filters(濾鏡數(shù)值).Stop()
?
對(duì)于濾鏡狀態(tài)的判斷可以通過(guò)“對(duì)象名.filters(濾鏡數(shù)值).status”判斷，該值為0時(shí)，表示濾鏡未執(zhí)行，為1時(shí)，表示濾鏡已經(jīng)完成， 為2時(shí)表示濾鏡在執(zhí)行中。在定義filter時(shí)，如上面所提到的，可以有混合（“filter:blendTrans(duration=時(shí)間數(shù) 值)”，duration表示濾 鏡執(zhí)行需要的時(shí)間，單位為秒）和顯示（“filter:revealTrans(duration=時(shí)間數(shù)值,transition=過(guò)渡類型)”，過(guò)渡 類型為從0－23的數(shù)值）兩種。
?
濾鏡目前還未被W3C正式承認(rèn)。濾鏡只是微軟IE瀏覽器的組成部分，不能用于Netscape瀏覽器。制定有關(guān)標(biāo)準(zhǔn)的組織正在就此進(jìn)行討論，但尚未 達(dá)成最后定論。在我看來(lái)，濾鏡是一種非常有趣而且是制作精彩的視覺(jué)效果必不可少的一部分。濾鏡能節(jié)省帶 寬，而且是你能在制作奇妙的視覺(jué)設(shè)計(jì)時(shí)使用文字格式，而不必先制作龐大的文字位圖以取得相同的效果。但由于這些功能尚未成為HTML的正式組成部分，所以 并不是所有的瀏覽器都能看到這些特色。有些時(shí)候，你必須考慮以傳統(tǒng)的方式制作相同的效果，當(dāng)然，你不得不繼續(xù)將龐大的GIF文件塞到網(wǎng)頁(yè)之中。?
實(shí)例講解
?
現(xiàn)在非常多的朋友搞個(gè)人網(wǎng)頁(yè)，而且做的五彩繽紛，各有特色，但是比較多的朋友把大大的一幅圖象放在頁(yè)面上，致使頁(yè)面下載很慢，加上用GIF格式做動(dòng) 畫(huà)，盡管用GIF格式搞的動(dòng)畫(huà)比較苗條，但是也不大合算。能否不用特別做的圖象，不用GIF格式做動(dòng)畫(huà)，可以把頁(yè)面搞的生氣活現(xiàn)呢？可以，但 JAVASCRIPT比較對(duì)一般初學(xué)者來(lái)說(shuō)是比較難的，筆者今天要用IE本身內(nèi)含的STYLE這個(gè)重量級(jí)的命令屬性中的RevealTrans和濾鏡來(lái)搞 搞新意思！希望網(wǎng)友們能靈活運(yùn)用這些濾鏡和頁(yè)面切換效果，把自己的主頁(yè)搞的有聲有色！不斷進(jìn)步！
?
Style屬性可以應(yīng)用在標(biāo)簽中，更可用廣泛應(yīng)用 在<table><tr><td><body><center><img><input><font><form><frame><label><map> 等等標(biāo)簽中，更重要的是，它可用在標(biāo)簽中。
?
頁(yè)面切換效果：
在頁(yè)面前部與之間加入""
說(shuō)明：duration為頁(yè)面切換的時(shí)間長(zhǎng)度，3.000表示3秒鐘，一般可以直接輸入3便可；transition為切換效果，從1-23共22種不同的切換效果，其中23為隨機(jī)效果。
?
濾鏡效果：
Photoshop的濾鏡用的多了吧，在頁(yè)面中也用濾鏡搞搞新意思吧！
語(yǔ)法: filter:filtername(fparameter1,fparameter2...)
(Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數(shù))
濾鏡說(shuō)明：
Alpha：設(shè)置透明層次.
blur：創(chuàng)建高速度移動(dòng)效果，即模糊效果.
Chroma：制作專用顏色透明.
DropShadow：創(chuàng)建對(duì)象的固定影子.
FlipH：創(chuàng)建水平鏡像圖片.
FlipV：創(chuàng)建垂直鏡像圖片.
glow：加光輝在附近對(duì)象的邊外.
gray：把圖片灰度化.
invert：反色.
light：創(chuàng)建光源在對(duì)象上.
mask：創(chuàng)建透明掩膜在對(duì)象上.
shadow：創(chuàng)建偏移固定影子.
wave：波紋效果.
Xray：使對(duì)象變的像被x光照射一樣.
?
1、濾鏡：Alpha
語(yǔ)法：filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity，Style=style,StartX=startX，StartY=startY，F(xiàn)inishX=finishX，F(xiàn)inishY=finishY)
說(shuō)明：
Opacity：起始值，取值為0～100, 0為透明，100為原圖。
FinishOpacity：目標(biāo)值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="75",2)
2、濾鏡：blur
語(yǔ)法：filter:Blur(Add = add, Direction = direction, Strength = strength)
說(shuō)明：
Add：一般為1，或0。
Direction：角度，0～315度，步長(zhǎng)為45度。
Strength：效果增長(zhǎng)的數(shù)值，一般5即可。
例子：filter:Blur(Add="1",Direction="45",Strength="5")
3、濾鏡：Chroma
語(yǔ)法：filter:Chroma(Color = color)
說(shuō)明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color="#FFFFFF")
4、濾鏡：DropShadow
語(yǔ)法：filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)
說(shuō)明：Color:#rrggbb格式，任意。
Offx：X軸偏離值。
Offy：Y軸偏離值。
Positive：1或0。
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、濾鏡：FlipH
語(yǔ)法：filter:FlipH
例子：filter:FlipH
?
6、濾鏡：FlipV
語(yǔ)法：filter:FlipV
例子：filter:FlipV
7、濾鏡：glow
語(yǔ)法：filter:Glow(Color=color, Strength=strength)
說(shuō)明：
Color：發(fā)光顏色。
Strength：強(qiáng)度(0－100)
例子：filter:Glow(Color="#6699CC",Strength="5")
8、濾鏡：gray
語(yǔ)法：filter:Gray
例子：filter:Gray
9、濾鏡：invert
語(yǔ)法：filter:Invert
例子：filter:Invert
10、濾鏡：mask
語(yǔ)法：filter:Mask(Color=color)
例子：filter:Mask (Color="#FFFFE0")
11、濾鏡：shadow
語(yǔ)法：filter:Shadow(Color=color, Direction=direction)
說(shuō)明：
Color：#rrggbb格式。
Direction：角度，0－315度，步長(zhǎng)為45度。
例子：filter:Shadow (Color="#6699CC", Direction="135")
12、濾鏡：wave
語(yǔ)法：filter: Wave(Add=add，F(xiàn)req=freq，LightStrength=strength，Phase=phase， Strength=strength)
說(shuō)明：
Add：一般為1，或0。
Freq：變形值。
LightStrength：變形百分比。
Phase：角度變形百分比。
Strength：變形強(qiáng)度。
例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、濾鏡：Xray
語(yǔ)法：filter:Xray
例子：filter:Xray;
14.顏色變化
語(yǔ)法：filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#B5CCFA", EndColorStr="#B5CCFA");
?
?
?
Filter 為微軟的專有技術(shù)，并被應(yīng)用到 IE4.0 及以上的 IE 瀏覽器中，所以只有 IE 支持。其他瀏覽器中對(duì) Filter 無(wú)任何效果。調(diào)用 Filter 對(duì)應(yīng)的 DOM 對(duì)象將會(huì)出錯(cuò)。
IE4.0 以上版本的 IE 瀏覽器中可以通過(guò) CSS 在網(wǎng)頁(yè)中應(yīng)用多種多媒體樣式的視覺(jué)效果，這就是微軟的 Filter 技術(shù)。隨著 IE 版本的增加，并在各版本中不斷的加強(qiáng) Filter 效果。通過(guò)將 Filter 與腳本的結(jié)合，可以在頁(yè)面中實(shí)現(xiàn)各種復(fù)雜的特效，如半透明、陰影、投影、遮罩、模糊、漸變、波浪、圖片翻轉(zhuǎn)等效果。
?
透明效果：filter:alpha(opacity=50);黑白照片：filter: gray;
X光照片：filter: Xray;
風(fēng)動(dòng)模糊：filter: blur(add=true,direction=45,strength=30);
正弦波紋：filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果：filter: Alpha(Opacity=50);
線型透明：filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明：filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明：filter: Chroma(Color=#FFFFFF);
降低色彩：filter: grays;
底片效果：filter: invert;
左右翻轉(zhuǎn)：filter: fliph;
垂直翻轉(zhuǎn)：filter: flipv;
投影效果：filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
馬賽克：filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
發(fā)光效果：filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔邊效果：filter:alpha(opacity=100, finishOpacity=0,style=2;
許多 Filter 中的特效均已進(jìn)入了 CSS3 草案，并在新版的非 IE 瀏覽器中得到了很好的支持。
?
?
?
Microsoft.AlphaImageLoader濾鏡講解
?
Microsoft.AlphaImageLoader 是 IE濾鏡 的一種，其主要作用就是對(duì)圖片進(jìn)行透明處理。雖然FireFox和IE7以上的IE瀏覽器已經(jīng)支持透明的PNG圖片，但是就IE5-IE6而言還是有一定的意義。
| enabled | : |
可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。
true
|
false
|
|||||||||
| sizingMethod | : |
可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。
|
|||||||||
| src | : | 必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。 |
| Enabled | : | 可讀寫(xiě)。布爾值(Boolean)。參閱 enabled 屬性。 |
| sizingMethod | : | 可讀寫(xiě)。字符串(String)。參閱 sizingMethod 屬性。 |
| src | : | 可讀寫(xiě)。字符串(String)。參閱 src 屬性。 |
PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說(shuō)，你可以選擇顯示在PNG(Portable Network Graphics)格式的圖片完全透明區(qū)域后面的內(nèi)容。
.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');}
?
P.S. 當(dāng)想使用backgroundimage屬性時(shí)，如果不想讓圖片原尺寸顯示，而是類似于IMG width=100% heigth=100% 的效果，可以通過(guò)此filter實(shí)現(xiàn)。
?
span.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.jpg', sizingMethod='scale')";
引用：最后說(shuō)說(shuō)關(guān)于FF和IE效果調(diào)和問(wèn)題。這個(gè)濾鏡效果只適用于IE,在FF下面無(wú)法顯示，我想這是前輩說(shuō)他很難實(shí)現(xiàn)的最終問(wèn)題了。以往我們用*或者_(dá)來(lái)修復(fù)IE下和FF的區(qū)別．這一次是要找方法修復(fù)FF不能實(shí)現(xiàn)的問(wèn)題.
其實(shí)想到的話,也很簡(jiǎn)單了.就是先讓FF正常顯示該圖片,然后,用*或_ 來(lái)清除IE下的顯示效果，最后用*或_ 來(lái)做以上的濾鏡效果。大功告成！
以上是官方的說(shuō)明。事實(shí)上實(shí)際操作中需要注意:AlphaImageLoader濾鏡會(huì)導(dǎo)致該區(qū)域的鏈接和按鈕無(wú)效，一般情況下的解決辦法是為鏈接或按鈕 添加：position:relative使其相對(duì)浮動(dòng) 要注意的是，當(dāng)加載濾鏡的區(qū)域的父層有position:absolute絕對(duì)定位的時(shí)候使用position:relative也不能使鏈接復(fù)原。建議 使用浮動(dòng)辦法處理。
具體操作：
- 為預(yù)覽區(qū)域（比如要在某個(gè)?div 中預(yù)覽）添加樣式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
- 為 AlphaImageLoader 設(shè)置 src 屬性。
?
?
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
