CSS的濾鏡的效果詳細介紹

有時候，我們需要給網頁中的圖片加一些特殊的效果，比如透明、扭曲、陰影或者翻轉等，我們一般都會想到用Photoshop等一些圖形軟體來處理，其實我們也可以利用CSS(層疊式樣表)提供的一些濾鏡來處理，這對於不熟悉Photoshop的網友來說，是非常好的一件事。

　　我們先從較簡單的開始，介紹幾個沒有參數的濾鏡。

　　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;