DIV+CSS進階：CSS濾鏡Filter教程

 

CSS濾鏡是什麼

CSS濾鏡是對常規的CSS的一個擴充子集，可以使應用對象(文字,圖片,HTML元素...)產生類似於PHOTOSHOP中的模糊,通透,邊緣發光等效果。合理的使用CSS濾鏡,可以減少網頁使用圖片的數量,從而減少網頁大小;也可以通過直接修改CSS中濾鏡的參數或者用JS動態修改CSS濾鏡參數,從而達到快速更新頁面的效果。CSS濾鏡豐富了網頁作為多媒體向使用者提供豐富多彩的資訊內容的展現方式。
 

CSS濾鏡的使用方法

filter:filtername(parameters)　即filter:濾鏡名稱（參數）

CSS有哪些濾鏡
1、alpha-設定透明層次
2、blur-建立高速度移動效果，即模糊效果
3、chroma-製作專用顏色透明
4、DropShadow-建立對象的固定影子
5、FlipH-建立水平鏡像圖片
6、FlipV-建立垂直鏡像圖片
7、glow-加光輝在附近對象的邊外
8、gray-把圖片灰階化
9、invert-反色
10、light-建立光源在對象上
11、mask-建立透明掩膜在對象上
12、shadow-建立位移固定影子
13、wave-波紋效果
14、Xray-使對象變得像被x光照射一樣

 

如何應用濾鏡

1、先定義好CSS ，再在頁面中需要的對象上使用預先定義好的CSS，實際上CSS的設定對話方塊裡已經預先將這些濾鏡的文法設定好了，我們只需填上適合的具體參數即可：
2、直接在支援CSS濾鏡效果的HTML控制項元素上編寫CSS filter代碼。

濾鏡的文法

Alpha濾鏡: 聽到這個名字，你可能會想到Flash裡有，Photoshop裡也似乎見過。一點不錯，它們的作用基本類似，就是把一個目標元素與背景混合。你可以指定數值來控制混合的程度。這種“與背景混合"通俗地說就是一個元素的透明度.
文法：STYLE="filter: Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
說明：
Opacity：起始值，取值為0～100, 0為透明，100為原圖。
FinishOpacity：目標值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

使用執行個體詳見:CSS濾鏡(Filter)應用執行個體集錦-alpha濾鏡

 

Blur濾鏡:是CSS的濾鏡之一，把它載入到文字上，可產生立體字的效果，這將為你在網頁上使用立體字做標題帶來了極大的方便，也為你的網頁減輕了分量；把Blur濾鏡載入到圖片上，能使你的圖片增色不少，雖然用圖象處理軟體也能達到同樣效果，但用Blur濾鏡可方便多了.
文法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
說明：
Add：一般為1，或0。
Direction：角度，0～315度，步長為45度。
Strength：效果增長的數值，一般5即可。
例子：filter:Blur(Add="1",Direction="45",Strength="5")
使用執行個體詳見:CSS濾鏡(Filter)應用執行個體集錦-blur濾鏡

Chroma濾鏡:設定對象的色彩濃度
文法：STYLE="filter:Chroma(Color = color)"
說明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color="#FFFFFF")

使用執行個體詳見:CSS濾鏡(Filter)應用執行個體集錦-Chroma濾鏡

DropShadow濾鏡:顧名思義就是添加對象的陰影製作效果。它的實際效果看上去就象是原來的對象離開了頁面，然後在頁面上顯示出該對象的投影。其工作原理是建立一個位移量，然後加上顏色.
文法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
說明：Color:#rrggbb格式，任意。
Offx：X軸偏離值。
Offy：Y軸偏離值。
Positive：1或0。
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
 

FlipH濾鏡:實現水平反轉
文法：STYLE="filter:FlipH"
例子：filter:FlipH
FlipV濾鏡:濾鏡實現垂直反轉
文法：STYLE="filter:FlipV"
例子：filter:FlipV

Glow濾鏡:對一個對象使用"glow"屬性後，這個對象的邊緣就會產生類似發光的效果
文法：STYLE="filter:Glow(Color=color, Strength=strength)"
說明：
Color：發光顏色。
Strength：強度(0－100)
例子：filter:Glow(Color="#6699CC",Strength="5")

Gray濾鏡:使用Gray濾鏡可以把一張圖片變成灰階圖
文法：STYLE="filter:Gray"
例子：filter:Gray

Invert濾鏡:顧名思義，使對象反轉倒置
文法：STYLE="filter:Invert"
例子：filter:Invert

Mask濾鏡:使用"MASK"屬性可以為對象建立一個覆蓋於表面的膜，其效果就象戴著有色眼鏡看物體一樣
文法：STYLE="filter:Mask(Color=color)"
例子：filter:Mask (Color="#FFFFE0")

Shadow濾鏡:利用“Shadow"屬性可以在指定的方向建立物體的投影，COLOR是投影色，DIRECTION是設定投影的方向。其中0度代表垂直向上，然後每45度為一個單位。它的預設值是向左的270度。
文法：filter:Shadow(Color=color, Direction=direction)
說明：
Color：#rrggbb格式。
Direction：角度，0-315度，步長為45度。
例子：filter:Shadow (Color="#6699CC", Direction="135")

Wave濾鏡:看它的名稱你可能就能想到其效果，正如你想的那樣，它的作用是把對象按照垂直的波形樣式扭曲，從而產生一種特殊的效果
文法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
說明：
Add：一般為1，或0。
Freq：變形值。
LightStrength：變形百分比。
Phase：角度變形百分比。
Strength：變形強度。
例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

Xray濾鏡:只顯示對象的輪廓
文法：STYLE="filter:Xray"
例子：filter:Xray