filter濾鏡的使用

剛開始學css,開始遇到filter不懂什麼意思後來到網上查了,以爲解釋的很全面,就把它摳下來,以便本身常常來看看。css

 

CSS濾鏡的使用方法:filter:filtername(parameters) 即 filter:濾鏡名稱(參數)post

alpha:設置透明層次
blur:建立高速度移動效果,即模糊效果
chroma:製做專用顏色透明
DropShadow:建立對象的固定影子
FlipH:建立水平鏡像圖片
FlipV:建立垂直鏡像圖片
glow:加光輝在附近對象的邊外
gray:把圖片灰度化
invert:反色
light:建立光源在對象上
mask:建立透明掩膜在對象上
shadow:建立偏移固定影子
wave:波紋效果
Xray:使對象變得像被x光照射同樣對象

 

具體的應用有兩種方法:
一、先定義好CSS ,再在頁面中須要的對象上使用預先定義好的CSS,實際上CSS的設置對話框裏已經預先將這些濾鏡的語法設置好了,咱們只需填上適合的具體參數便可。圖片


二、直接在支持CSS濾鏡效果的HTML控件元素上編寫CSS filter代碼。ip

Alpha濾鏡: 聽到這個名字,你可能會想到Flash裏有,Photoshop裏也彷佛見過。一點不錯,它們的做用基本相似,就是把一個目標元素與背景混合。你能夠指定數值來控制混合的程度。這種「與背景混合"通俗地說就是一個元素的透明度.ci

語法: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″)it

 

Blur濾鏡:是CSS的濾鏡之一,把它加載到文字上,可產生立體字的效果,這將爲你在網頁上使用立體字作標題帶來了極大的方便,也爲你的網頁減輕了份量;把Blur濾鏡加載到圖片上,能使你的圖片增色很多,雖然用圖象處理軟件也能達到一樣效果,但用Blur濾鏡可方便多了.io

語法: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″)class

Chroma濾鏡:設置對象的色彩濃度
語法:STYLE="filter:Chroma(Color = color)"
說明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")原理

 

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

相關文章
相關標籤/搜索