妙用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設定時才有效