我們先從較簡單的開始，介紹幾個沒有參數的濾鏡。
1.Gray濾鏡
Gray濾鏡的作用是產生黑白效果
使用方法：
以下是引用片段：
<img src="a.gif" style="filter:gray">
2.Invert濾鏡
Invert濾鏡的作用是反色效果
使用方法：
以下是引用片段：
<img src="a.gif" style="filter:invert">
3.Xray濾鏡
Xray濾鏡的作用是產生X光效果
使用方法：
以下是引用片段：
<img src="a.gif" style="filter:xray">
4.fliph和flipv
fliph濾鏡的作用是產生水平翻轉效果;flipv濾鏡的作用是產生垂直翻轉效果
使用方法：
以下是引用片段：
<img src="a.gif" style="filter:fliph">或<img src="a.gif" style="filter:flipv">
5.alpha濾鏡
alpha濾鏡作用主要是對圖片的透明度進行處理
使用方法：
以下是引用片段：
<img src="a.gif" style="filter:alpha(opacity=value1,finishopacity=value2,style=value3)">
說明：value1為圖片的透明值，范圍是0(完全透明)～100(完全不透明)
value2為圖片透明度變換結束時的透明值，范圍是0(完全透明)～100(完全不透明) 注：該值只有在value3設定時才有效
value3為圖片透明度變換方向。取值為1時，圖片透明度按從左到右線性變化;取值為2時，圖片透明度從內到外沿半徑變化;取值為3時，圖片透明度從內到外呈矩形變化
例：
以下是引用片段：
<img src="a.gif" style="filter:alpha(opacity=0,finishopacity=60,style=2)">
6.shadow濾鏡
shadow濾鏡的作用是產生陰影效果
使用方法：
以下是引用片段：
<img src="a.gif" style="filter:shadow(color=value1,direction=value2)">
說明：value1為陰影的顏色值，如000000表示黑色
value2為光線照射角度，如135
例：
以下是引用片段：
<img src="a.gif" style="filter:shadow(color=000000,direction=135)">
7.wave濾鏡
wave濾鏡的作用是使圖片產生扭曲效果
使用方法：
以下是引用片段：
<img src="a.jpg" style="filter:wave(add=value1,freq=value2,lightstrength=value3,phase=value4,strength=value5)">
說明：value1的取值為1時，將原圖片增加到處理過的圖片上;為0時，則不增加
value2為視覺扭曲的波浪數
value3是波形亮度百分比，取值范圍為0～100
value4為正弦波開始偏移的初始量，取值范圍為0～100
value5為波形效果的強度
例：
以下是引用片段：
<img src="a.jpg" style="filter:wave(add=0,freq=5,lightstrength=50,phase=0,strength=5)">
下面我們舉一個簡單的例子，瀏覽時會出現這樣的一個效果：網頁上有一個幾乎透明的圖像，當鼠標移到圖像上時，圖像慢慢變清晰;當鼠標移開時，圖像又恢復到原來的透明狀態。
要實現這個功能，需要使用到CSS的alpha濾鏡，并用javascript來控制alpha濾鏡的Opacity值，首現在網頁中插入一個圖片，并設定alpha濾鏡的opacity值，讓圖片透明，圖片代碼為：
以下是引用片段：
<img src="a.gif" id="me" style="FILTER:alpha(Opacity=20)">.
javascript代碼如下：
| 以下是引用片段： <script language="javascript"> function ch(n) { if(n=="add") //如果傳入的參數為add，則將圖片的不透明度增大 if(me.filters.alpha.Opacity<100) { me.filters.alpha.Opacity=me.filters.alpha.Opacity+5; setTimeout("ch('add')",10); } if(n=="dec") //如果傳入的參數為dec，則將圖片的不透明度降低 if(me.filters.alpha.Opacity>20) { me.filters.alpha.Opacity=me.filters.alpha.Opacity-5; setTimeout("ch('adc')",10); } } </script> |
將上面的代碼加入<head></head>中，然后給圖片加入onMouseOver和onMouseOut動作，即
以下是引用片段：
<img src="a.gif" id="me" style="FILTER:alpha(Opacity=20)" onMouseOver="ch('add')" onMouseOut="ch('dec')">.
新聞熱點
疑難解答
