CSS 濾鏡 轉

基本濾鏡--可直接做用在對象上，並當即生效，主要有：

1).alpha--通道

2).blur--模糊

3)MotionBlur--移動模糊

4)Chroma--透明色

5)Drop Shadow--下落陰影

6)Flip--對稱變換

7)Glow--光暈

8)GrayScale--灰度

9)Invert--反色

10)Mask--遮罩

11)Shadow--陰影

12)X-ray--X光效果

13)Emboss or Engrave--浮雕

14)Wave--波浪

 

高級濾鏡--需配合JS等腳本使用，產生更絢麗的變幻效果 ，主要有

1)BlendTrans -- 漸隱變換

2)RevealTrans--變換

3)Light --燈光

alpha  filter:alpha(opacity=opacity,finishopacity=finishopacity,startX=startX,startY=startY,finishX=finishX,finishY=finishY);opacity: 透明度等級， 取值 0-100(0徹底透明)

style: 透明區域的形狀特徵，取值 0,1,2,3
0-統一形狀 1-線性 2--圓形放射漸變  3--矩形放射漸變
X,Y這種的爲座標參數了

來源：http://blog.csdn.net/oscar999/article/details/6817648

<!--==1.靜態濾鏡==-->

/*整個網頁變灰*/

{filter:gray;}/*整個網頁變灰*/

{filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);/*當值爲 1 時以灰度顯示對象,裏面還能夠添加其它屬性*/}

{filter:invert;}/*整個網頁反相*/

{filter:Xray;}/*x光照射*/

/*png 背景兼容Ie6寫法*/

{background:url(h2-bg.png) no-repeat;

background:none\9;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="h2-bg.png");}

/*透明度*/

{opacity:0.3;/*支持火狐*/

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);/*透明度，裏面能夠添加的屬性*/}

/*漸變色彩層*/

{filter : progid:DXImageTransform.Microsoft.Gradient (startColorStr=#00BBCCDD,endColorStr=#FFFF0000)}

/*模糊效果*/

{filter:progid:DXImageTransform.Microsoft.Blur(makeShadow=true,ShadowOpacity=0.1,pixelRadius=9)}

/*添加陰影效果*/

{filter:progid:DXImageTransform.Microsoft.DropShadow(color=#AAFF0000,positive=false,offX=4,offY=8);}

/*給對象添加光輝（即在邊緣增長輝光）*/

{filter:progid:DXImageTransform.Microsoft.Glow(strength=5,color=#676767)}

<!--==2.動態濾鏡==-->

/*切換效果(0到23鍾)*/

{filter:revealTrans(transition=12,duration=5);}

/*模擬開關門*/

{filter:progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)}

/*國際象棋棋盤的網格推拉轉換效果*/

{filter:progid:DXImageTransform.Microsoft.CheckerBoard(squaresX=15,squaresY=10,direction=left)}

/*模擬百葉窗的效果*/

{filter:progid:DXImageTransform.Microsoft.Blinds(bands=50,Direction=right)}

/*漸隱漸顯的效果*/

{filter:progid:DXImageTransform.Microsoft.Fade()}

/*放射狀擦除效果*/

{filter:progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle=radial);}

/*隨機線條效果*/

{filter:progid:DXImageTransform.Microsoft.RandomBars()}

http://www.w3cplus.com/css3/ten-effects-with-css3-filter

黑白照片 filter: gray; 
X光照片 filter: Xray; 
風動模糊 filter: blur(add=true,direction=45,strength=30); 
正弦波紋 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3); 
半透明效果 filter: Alpha(Opacity=50); 
線型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140); 
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200); 
白色透明 filter: Chroma(Color=#FFFFFF); 
下降色彩 filter: grays; 
底片效果 filter: invert; 
左右翻轉 filter: fliph; 
垂直翻轉 filter: flipv; 
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true); 
馬賽克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3); 
發光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5); 
柔邊效果 filter:alpha(opacity=100, finishOpacity=0,style=2

filter歷史

其實這個filter是CSS1的屬性了，可是由於老版本的IE4.0~IE9對此支持不怎麼感冒，對瀏覽器的支持也不穩定，所以這個屬性只能當作實驗性技術來觀察。但，對於想要探究IE的filter是怎樣模擬像css3工做原理的同行不妨能夠充充電。

此屬性我我的概況爲css PS化，爲何，由於它的不少屬性或多或少是從PS衍伸進來的，如圖

就連咱們用css3來寫一個華麗麗的轉場動畫時，咱們也能夠考慮讓咱們的ie一樣具備此功能，那麼ie中的filter就體現出來了。。

1、filter界面濾鏡

在ie中 filter 分爲靜態濾鏡(Visual Filters)和過渡轉場(Transitions Reference)，前者是的效果能夠設置元素的不透明度、漸變、模糊、對比度、明度等這些，後者注重的ie的動畫效果。

對於在使用ie filter屬性時，必要的前綴是須要的，對此ie在filter規範以下：

.test{
	filter:progid:DXImageTransform.Microsoft.    /*.後面都是緊跟着各類濾鏡和轉場函數*/
}

/*如：模糊濾鏡*/
.blur{
	filter:progid:DXImageTransform.Microsoft.Blur()    /*.函數的開頭第一個字母必須大寫，括號()裏面的濾鏡的各類值*/
}

對於爲何要在開頭寫上progid:DXImageTransform.Microsoft 不是很清楚，估計是爲了區分吧。有哪位知道麻煩貼個地址說一下哈。

1.AlphaImageLoader，這個屬性是主要是針對png透明圖片進行不透明度的處理，爲何要這麼說呢，由於IE6的png透明圖片實際上是不透明的，顯示會灰色背景。

語法：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true' , sizingMethod='' , src='mini.jpg')

其值包括2個可選值，一個必選值。

屬性	特性	描述
enabled	Enabled	可選值，Boolean布爾值，默認值爲ture，啓用過濾器；false爲不啓用過濾器。全部的filter都有該屬性值，下面不一一多說。
sizingMethod	sizingMethod	可選值，設置或檢索的方式來顯示一個圖像在對象邊界顯示方式。有三個值：crop裁剪圖像以適應對象的尺寸；image，默認值，擴大或減小對象的邊界,以適應圖像的尺寸；scale，伸展或收縮圖像填充對象的邊界；
src	src	必須值，引入圖片。

不妨用你的手中的IE6~8來預覽一下官方demo→AlphaImageLoader

2.Gradient，漸變濾鏡。

語法：

filter:progid:DXImageTransform.Microsoft.Gradient()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Gradient(enabled='ture',GradientType='1',StartColorStr='#00000000',EndColorStr='#FFFF3300')

屬性	特性	描述
enabled	Enabled	可選值，Boolean布爾值，默認值爲ture，啓用過濾器；false爲不啓用過濾器。
StartColorStr	StartColor	設置或者檢索開始不透明度的梯度值，整數型Integer，指定一個整數型值，值的變化從0 (transparent[透明]) to 4294967295 ([白色不透明]).
	StartColorStr	設置或者檢索開始的顏色值，string類型字符串，值從#FF000000 到 #FFFFFFFF，默認值爲：#FF000000，好比一個值爲：#AARRGGBB ，那麼AA表明透明度alpha，RR表示紅色16進制值，GG表示綠色16進制值，BB表示黑色16進制值。
	EndColor	設置或者檢索結束不透明度的梯度值，同上，不多用。
	EndColorStr	設置或者檢索結束的顏色值，同上
	GradientType	設置漸變的方向。有兩個值，1表明水平方向，0表明垂直方向漸變。

不妨用你的手中的IE6~8來預覽一下官方demo→Gradient Filter

稍有留意咱們看了下面的style屬性的時候其實就會發現，StartColorStr中的值跟咱們日常的用到的#ffffff是不同的，如圖

寫着寫着發現這個 filter 屬性不少，估計篇幅很大，那麼就暫時分上下篇來寫好了，否則篇幅實在過大，寫的人都要掛了，況且看的人能這麼蛋疼看下去？

2、filter靜態濾鏡

1.Alpha，調整對象內容的不透明度。

語法：

filter:progid:DXImageTransform.Microsoft.Alpha()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Alpha(enabled='ture',GradientType='1',StartColorStr='#00000000',EndColorStr='#FFFF3300')

Style，設置或者調整不透明度的風格。0表明默認值，1表明線性不透明，2表明徑向漸變，3表明矩形漸變

Opacity，設置或調整不透明度值。0~100值，其中0默認值表示全透明，100爲全不透明

FinishOpacity，設置或調整最後不透明度值。0~100值，其中0默認值表示全透明，100爲全不透明

StartX，設置或調整水平不透明最開始位置，默認值爲0，即從對象最左邊開始。

FinishX，設置或調整水平不透明度結束位置，默認值爲0

StartY，設置或調整垂直方向不透明度開始位置，默認值爲0

FinishY，設置或調整垂直不透明度結束位置，默認值爲0

不妨用你的手中的IE6~8來預覽一下官方demo→Alpha Filter

2.BasicImage，調整對象的內容的顏色處理、圖像旋轉或不透明度。

filter:progid:DXImageTransform.Microsoft.BasicImage()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.BasicImage(Grayscale='x', Xray='x', Mirror='x', Invert='x', Opcity='x', Rotation='x')

GrayScale ，設置或調整對象的灰度值。

Invert ，設置或調整對象的反相。

Opacity ，設置或調整對象的不透明度。

Mask ，設置或調整對象的的RGB是否爲MashColor值，0默認值，顯示正常RGB值，1表示改變內容爲MashColor（不經常使用）

Mirror ，設置或調整對象鏡像。0正常顯示，1內容對象將翻過來。

Rotation ，設置或調整對象旋轉，0正常顯示，1表明旋轉90°，2表明旋轉180°，3表明旋轉270°

XRay ，設置或調整對象的X射線，布爾值，0正常顯示，1表明X射線，有點像咱們去醫院拍X光同樣的效果。

不妨用你的手中的IE6~8來預覽一下官方demo→BasicImage Filter

3.Blur，設置對象的模糊值。

filter:progid:DXImageTransform.Microsoft.Blur()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='x', MakeShadow='x', ShadowOpacity='x')

PixelRadius，設置對象的模糊半徑，1~100數值。

MakeShadow，設置對象是否投影，布爾值，true和false

ShadowOpacity，設置對象投影不透明度，0.0~1.0，假如MakeShadow爲false那麼該值無效。

不妨用你的手中的IE6~8來預覽一下官方demo→Blur Filter

4.Chroma ，設置對象的色彩透明度

filter:progid:DXImageTransform.Microsoft.Chroma()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Chroma(Color='x')

Color，設置顏色值。

 

5.Compositor ，設置新對象內容的合成顏色，這個翻譯有點拗口，大概的意思就是：2個對象，要顯示哪一個或者隱藏哪一個，或者顯示他們對比以後的新對象。

filter:progid:DXImageTransform.Microsoft.Compositor()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Compositor(function='')

 

6.DropShadow ，設置對象的投影效果。

filter:progid:DXImageTransform.Microsoft.DropShadow()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX='x', OffY='x', Color='x', Positive='x')

OffX，設置投影的X位移，單位數值，默認值爲5

OffY，設置投影的Y位移，單位數值，默認值爲5

Color，設置投影的顏色值

Positive，設置投影的透明或者非透明。

 

7.Emboss ，設置對象的浮雕效果。

filter:progid:DXImageTransform.Microsoft.Emboss()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Emboss(Bias='')

 

8.Engrave ，設置對象的雕刻效果。

filter:progid:DXImageTransform.Microsoft.Engrave()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Engrave(Bias='')

 

9.Glow ，設置對象的光暈效果。

filter:progid:DXImageTransform.Microsoft.Glow()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Glow(color='', Strength='')

color，設置光暈顏色。

Strength，設置光暈的寬度，數值單位

 

10.Light ，設置對象的亮度

filter:progid:DXImageTransform.Microsoft.Light()

addAmbient，加入對象環境光

addCone ，加入錐形光源

addPoint 加入點光源

changeColor ，改變亮度顏色

changeStrength，改變亮度長度

clear，清除亮度

moveLight，移動光源焦點。

 

11.ICMFilter ，設置對象顏色內容改變，使其顯示像打印設備的顏色。

官方無demo，IE9時，這個濾鏡僅僅應用於屏幕內容顯示效果上，當內容是打印時，將不該用。

12.MaskFilter ，設置對象內容透明或者非透明顏色。

filter:progid:DXImageTransform.Microsoft.MaskFilter()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.MaskFilter(Color='')

13.Matrix，調整大小、旋轉或翻轉使用矩陣的內容對象轉換。

filter:progid:DXImageTransform.Microsoft.Matrix()

 

14.MotionBlur，設置對象模糊，測試完demo以後感受有點像線性模糊，就是月光投射下來不均勻的模糊效果。

filter:progid:DXImageTransform.Microsoft.MotionBlur()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.MotionBlur(Direction='',Strength='',Add='')

Direction，設置對象模糊方向，從0°~315°照射下來。

Strength ，設置對象模糊範圍，單位數值，初始值爲5

Add，設置圖像模糊是否覆蓋在原圖上，布爾值，true表示覆蓋，false表示不覆蓋

 

15.Wave，設置對象爲波浪紋濾鏡效果

filter:progid:DXImageTransform.Microsoft.Wave()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Wave(Add='', LightStrength='', Phase='', Strength='',  Freq='')

Add，設置濾鏡是否覆蓋在原圖上，布爾值，true表示覆蓋，false表示不覆蓋

LightStrength，亮度強度，0~100數值，數值越大濾鏡效果越明顯

Phase，相對偏移值，0~100數值

Strength，設置波浪強度，默認值爲5，數值越大，波浪效果越明顯。

Frep，設置波浪頻率，默認值爲3，數值越大，波浪效果越明顯。

 

16.Shadow，設置對象陰影效果。

filter:progid:DXImageTransform.Microsoft.Shadow()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='', Direction='', Strength='')

Color，設置陰影顏色。

Direction，設置陰影的方向，角度也是從0°~315°取值（跟PS的投影效果很是的類似。）

Strength，設置投影強度，數值越大越模糊。

來源：http://www.qianduan.net/guan-yu-ie-zhong-css-filter-lv-jing-xiao-zhi-shi.html