CSS濾鏡應用技巧

css|技巧|濾鏡

常做網頁的朋友們一定都知道CSS吧，CSS是Cascading Style Sheet的縮寫，通常人們都叫它“樣式表”或“級聯樣式”。它的功能非常全面，從文字、圖片、段落到整個網頁各個方面都有它的強大之處，今天我們就來說說CSS中的濾鏡效果。

大家在做網頁時，對影像處理多數都是用Photoshop等圖形處理軟體吧，其實在CSS中內建了許多濾鏡，合理應用這些濾鏡您同樣可以做出以上軟體所做出的效果。下面我就通過執行個體來看看CSS中的濾鏡應用。

圖片霧化

代碼：

1、內部插入式

在〈head〉與〈/head〉之間插入：

〈style type = text/css〉 .fog{filter:alpha(opacity=100,style=2)} 〈/style〉

然後再在圖片屬性代碼中加class="fog"。

注意：在〈head〉與〈/head〉之間插入代碼中fog前有一個“．”（不包括引號），請一定不要漏掉了。

2、直接插入式

在圖片屬性代碼中加入：

style=" filter:alpha(opacity=100,style=2)"

效果如圖1。

圖1

特點：通過使用CSS的“alpha”濾鏡，做出圖片霧化的效果。

延伸：“style”參數：“0”沒有漸進，“1”直線漸進，“2”圓形漸進，“3”矩形漸進；參數“opacity”為不透明的程度百分比。

圖片風化

代碼：

1、內部插入式

在〈head〉與〈/head〉之間插入：

〈style type = text/css〉 .wind{filter:Blur(Strength=10)} 〈/style〉

然後再在圖片屬性代碼中加class="wind"(注意“.”號)。

2、直接插入式

在圖片屬性代碼中加入：

style=" filter: Blur(Strength=10)"

效果如圖2。

圖2

特點：通過使用CSS的blur濾鏡，使圖片具有風吹模糊的效果。