CSS中filter濾鏡的學習筆記，cssfilter學習筆記

CSS中filter濾鏡的學習筆記，cssfilter學習筆記

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是區分大小寫！ 
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檔案塞到網頁之中。 
沉默...沉默... 

　 
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   

問html,css中 找不到濾鏡filter屬性

dreamweaver裡面沒有整合filter,所以你在style裡面是聯想不出來的！
必須你自己找到相關資料，然後自己對應著敲進去！
而且，濾鏡並不是所有的瀏覽器都相容，用的時候需要額外注意！
 
怎將CSS的濾鏡效果清除掉？網上添加濾鏡效果的文章比比皆是，就是沒有清除的用法

不能修改原來CSS，那麼你新寫的CSS能串連到那頁面中麽？
如果能的話，只有用 filter:none; 清掉那濾鏡就可以了。
如果你不知道那選取器，那麼也可以用這樣的
*{filter:none!important;}
唯寫上面這一條就OK了……

如果你那CSS不能串連到那頁面的話，那麼也可以用本地的“使用者樣式表”來實在：
IE瀏覽器，開啟IE那個選項
在 “鋪助功能” 》 使用者樣式表
處打鉤，然後選擇你那CSS樣式表就可以了……

以上……