css鼠標移到圖片上由黑白變彩色

css鼠標移到圖片上由黑白變彩色（附：CSS濾鏡）

<STYLE type=text/css>
A IMG { FILTER: gray;} <!-- 經過濾鏡讓圖片以灰色顯示 -->
A:hover IMG {FILTER:} <!-- 經過濾鏡恢復圖片爲彩色 -->
h2{font-size:18px; padding-left:160px;}
</STYLE>
<h2>把鼠標移上來我就變彩色的了</h2><A href=http://www.aa25.cn><IMG src="/UploadFile/taobao0903/love18qingerenjie_0205_510X250_hjj.jpg" border="0"></A>
<br />

filter:濾鏡名稱（參數）

濾鏡效果

功能描述

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

具體的應用

有兩種方法：

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

　　二、直接在支持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 （默認）或falsedirection該參數用來設置模糊的方向。
0度表明垂直向上，每45度爲一個單位，默認值是向左的270度strength只能使用整數來指定，表明有多少像素的寬度將受到模糊影響，默認是5個像素。

c.DropShadow 濾鏡 

　　「DropShaow"，顧名思義就是添加對象的陰影效果。其工做原理是創建一個偏移量，加上色彩。 

DropShadow 濾鏡 語法

{filter:dropshadow
(color=color,offx=ofx,offy=offy,positive=positive)}

　　參數含義以下：

參數

說明

Color表明投射陰影的顏色offxX方向陰影的偏移量offyY方向陰影的偏移量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----100PHASE設置正弦波的偏移量STRENGTH振幅大小

m.Gray ,Invert,Xray 濾鏡

　　使用Gray濾鏡能夠把一張圖片變成灰度圖，語法很簡單：

Gray 濾鏡 語法

{filter:gray}