CSS filter濾鏡的用法

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

濾鏡效果                   功能描述 
Alpha                      設置不同的透明度變化效果 
Blur                         建立模糊效果 
DropShadow           建立一種偏移的影象輪廓,即投射陰影 
FlipH                        水平翻轉 
FlipV                        垂直翻轉 
Glow                        爲對象的邊界增加色彩光效 
Gray                         將圖片以灰度形式顯示 
Invert                      將色彩、飽和度以及亮度值完全反轉,類似底片效果 
Light                        在一個對象上進行燈光投影 
Mask                        爲一個對象建立彩色透明遮罩 
Shadow                   爲對象建立輪廓的影效果 
Wave                       在X軸和Y軸方向利用正弦波打亂圖片 
Xray                         只顯示對象的輪廓 

具體的應用有兩種方法:

1、 先定義好CSS ,再在頁面中需要的對象上使用預先定義好的CSS,實際上CSS的設置對話框裏已經預先將這些濾鏡的語法設置好了,我們只需填上適合的具體參數即可:

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

a.Alpha 濾鏡

  "Alpha"屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定座標,可以指定各種不同範圍的透明度。
Alpha 濾鏡語法 {FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,
style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)} 

  參數含義分別如下:

參數 說明 
opacity 透明度。默認的範圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。 
finishopacity 是一個可選參數,如果想要設置漸變的透明效果,就可以使用他們來指定結束時的透明度。範圍也是0 到 100。 
style 指定透明區域的形狀特徵:
0 代表統一形狀
1 代表線形
2 代表放射狀
3 代表矩形 
startx 漸變透明效果開始處的 X座標。 
starty 漸變透明效果開始處的 Y座標。 
finishx 漸變透明效果結束處的 X座標。 
finishy 漸變透明效果結束處的 Y座標。 
b.Blur 濾鏡  用手指在一幅尚未乾透的畫面迅速劃過時,畫面就會變得模糊。”Blur"就是產生同樣的模糊效果。

Blur濾鏡語法 HTML:{filter:blur(add=add,direction=direction,
strength=strength)}
Script語言: [oblurfilter=] object.filters.blur 

  參數含義分別如下:

參數 說明 
add 它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的,
這是一個布爾值:ture (默認)或false 
direction 該參數用來設置模糊的方向。
0度代表垂直向上,每45度爲一個單位,默認值是向左的270度 
strength 只能使用整數來指定,代表有多少像素的寬度將受到模糊影響,默認是5個像素。 

c.DropShadow 濾鏡 

  “DropShaow",顧名思義就是添加對象的陰影效果。其工作原理是建立一個偏移量,加上色彩。 

DropShadow 濾鏡語法 {filter:dropshadow
(color=color,offx=ofx,offy=offy,positive=positive)} 

  參數含義如下:

參數 說明 
Color 代表投射陰影的顏色 
offx X方向陰影的偏移量 
offy Y方向陰影的偏移量 
Positive 布爾值
如果爲TRUE(非0),就爲任何的非透明像素建立可見的投影
如果爲FASLE(0),就爲透明的像素部分建立透明效果 

d.FlipH, FlipV 濾鏡

  FlipH 濾鏡實現水平反轉 FlipH 濾鏡語法 {filter:filph} 

  FlipV 濾鏡實現垂直反轉 

FlipV 濾鏡語法 {filter:filpv} 
e.FlipH, FlipV 濾鏡

  FlipH 濾鏡實現水平反轉 FlipH 濾鏡語法 {filter:filph} 

  FlipV 濾鏡實現垂直反轉 

FlipV 濾鏡語法 {filter:filpv} 
f.Glow 濾鏡

  對一個對象使用"glow"屬性後,這個對象的邊緣就會產生類似發光的效果。

Glow 濾鏡語法 {filter:glow(color=color,strength)} 

  參數含義如下:

參數 說明 
Color 指定發光的顏色 
STRENGTH 強度,值爲1到255之間的任何整數,指定發光色力度和範圍。 
g.Gray ,Invert,Xray 濾鏡

  使用Gray濾鏡可以把一張圖片變成灰度圖,語法很簡單:

Gray 濾鏡語法 {filter:gray} 
h.Gray ,Invert,Xray 濾鏡

  使用Gray濾鏡可以把一張圖片變成灰度圖,語法很簡單:

Gray 濾鏡語法 {filter:gray} 
i.Mask 濾鏡
Mask 濾鏡語法 {filter:mask(color=color)} 

  使用"MASK"屬性可以爲對象建立一個覆蓋於表面的膜,其效果就象戴着有色眼鏡看物體一樣 。
j.

Light 濾鏡


Light 濾鏡語法 {filter:light} 


  這個屬性模擬光源的投射效果。一旦爲對象定義了“LIGHT"濾鏡屬性,那麼就可以調用它的“方法(Method)"來設置或者改變屬性。“LIGHT"可用的方法有:


參數 說明 
AddAmbient 加入包圍的光源 
AddCone 加入錐形光源 
AddPoint 加入點光源 
Changcolor 改變光的顏色 
Changstrength 改變光源的強度 
Clear 清除所有的光源 
MoveLight 移動光源 


k.Shadow 濾鏡
Shadow 濾鏡
語法 {filter:shadow(color=color,direction=direction)} 

  利用“Shadow”屬性可以在指定的方向建立物體的投影,COLOR是投影色,DIRECTION是設置投影的方向。其中0度代表垂直向上,然後每45度爲一個單位。它的默認值是向左的270度。
l.

Wave 濾鏡


Wave 濾鏡
語法 {filter:wave(add=add,freq=freq,
lightstrength=strength,
phase=phase,strength=strength)} 

參數 說明 
wave 把對象按垂直的波形樣式打亂。
默認是 TRUE(非0) 
ADD 是否要把對象按照波形樣式打亂 
FREQ 波紋的頻率,也就是指定在對象上一共需要產生多少個完整的波紋 
LIGHTSTRENGTH 可以對於波紋增強光影的效果,範圍0----100 
PHASE 設置正弦波的偏移量 
STRENGTH 振幅大小 


m.Gray ,Invert,Xray 濾鏡

  使用Gray濾鏡可以把一張圖片變成灰度圖,語法很簡單:

Gray 濾鏡語法 {filter:gray}

 

 

分享到:
評論
3 樓 fastwind 2008-07-18  
CSS濾鏡filter詳解
語法:STYLE="filter:filtername(fparameter1, fparameter2...)"
(Filtername爲濾鏡的名稱,fparameter1、fparameter2等是濾鏡的參數)

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

1、濾鏡:Alpha
語法: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")
2、濾鏡: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")
3、濾鏡:Chroma
語法:STYLE="filter:Chroma(Color = color)"
說明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")
4、濾鏡: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")
5、濾鏡:FlipH
語法:STYLE="filter:FlipH"
例子:filter:FlipH
6、濾鏡:FlipV
語法:STYLE="filter:FlipV"
例子:filter:FlipV
7、濾鏡:glow
語法:STYLE="filter:Glow(Color=color, Strength=strength)"
說明:
Color:發光顏色。
Strength:強度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")
8、濾鏡:gray
語法:STYLE="filter:Gray"
例子:filter:Gray
9、濾鏡:invert
語法:STYLE="filter:Invert"
例子:filter:Invert
10、濾鏡:mask
語法:STYLE="filter:Mask(Color=color)"
例子:filter:Mask (Color="#FFFFE0")
11、濾鏡:shadow
語法:filter:Shadow(Color=color, Direction=direction)
說明:
Color:#rrggbb格式。
Direction:角度,0-315度,步長爲45度。
例子:filter:Shadow (Color="#6699CC", Direction="135")
12、濾鏡: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")
13、濾鏡:Xray
語法:STYLE="filter:Xray"
例子:filter:Xray  
2 樓 fastwind 2008-07-18  
2.CSS動態濾鏡
  動態濾鏡可以爲頁面添加動人的淡入淡出、圖象轉化效果,它可以分爲兩種blend(混合)和reveal(顯示),前者可以使對象漸漸消失或出現,後者提供了24種圖象轉化的效果。對於動態濾鏡的調用除去象在靜態濾鏡中要定義的濾鏡類型,參數等等,還用到腳本語言控制它的狀態。
  首先,在開始一個動態效果之前,先需要進行裝備(Apply),然後播放(Play)動態效果,在動態效果進行中還可以中斷動態效果(Stop),以上可以用下面的方法實現:
    對象名.filters(濾鏡數值).Apply()
    對象名.filters(濾鏡數值).Play()
    對象名.filters(濾鏡數值).Stop()
  對於濾鏡狀態的判斷可以通過“對象名.filters(濾鏡數值).status”判斷,該值爲0時,表示濾鏡未執行,爲1時,表示濾鏡已經完成,爲2時表示濾鏡在執行中。
  在定義filter時,如上面所提到的,可以有混合(“filter:blendTrans(duration=時間數值)”,duration表示濾鏡執行需要的時間,單位爲秒)和顯示(“filter:revealTrans(duration=時間數值,transition=過渡類型)”,過渡類型爲從0-23的數值)兩種。
 
  濾鏡目前還未被W3C正式承認。濾鏡只是微軟IE瀏覽器的組成部分,不能用於Netscape瀏覽器。制定有關標準的組織正在就此進行討論,但尚未達成最後定論。在我看來,濾鏡是一種非常有趣而且是製作精彩的視覺效果必不可少的一部分。濾鏡能節省帶寬,而且是你能在製作奇妙的
視覺設計時使用文字格式,而不必先製作龐大的文字位圖以取得相同的效果。
  但由於這些功能尚未成爲HTML的正式組成部分,所以並不是所有的瀏覽器都能看到這些特色。有些時候,你必須考慮以傳統的方式製作相同的效果,當然,你不得不繼續將龐大的GIF文件塞到網頁之中。
沉默...沉默...
1 樓 fastwind 2008-07-18  
1.CSS靜態濾鏡樣式 (filter)(只有IE4.0以上支持)
  CSS靜態濾鏡樣式的使用方法:{ filter : filtername( parameters1, parameters2, ...) }

Filter樣式 簡要說明 支持參數
alpha 設置圖片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength
blur 在指定的方向和位置上產生動感模糊效果 add、direction、strength
chroma 對所選擇的顏色進行透明處理 color
dropShadow 在指定的方向和位置上產生陰影 color、offX、offY、positive
flipH 沿水平方向翻轉對象  
flipV 沿垂直方向翻轉對象  
glow 在對象周圍上發光 color、strength
gray 將對象以灰度處理  
invert 逆轉對象顏色  
light 對對象進行模擬光照  
mask 對對象生成掩膜 color
shadow 沿對象邊緣產生陰影 color、direction
wave 在垂直方向產生正弦波形 add、freq、lightStrength、phase、strength
xray 改變對象顏色深度,並繪製黑白圖象  

以上就是靜態濾鏡的全部內容,要注意的是CSS是區分大小寫的!


http://www.zhuyew.net/a/div_css/div_css_examples/list_9_3.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章