摘要：屬性特性描述可選值，布爾值，默認(rèn)值為，啟用過濾器為不啟用過濾器。正常顯示，內(nèi)容對象將翻過來。，設(shè)置對象是否投影，布爾值，和，設(shè)置對象投影不透明度，，假如為那么該值無效。

前段時間在做一個專題的時候用到了opacity不透明度屬性，因為設(shè)計圖上是半透明背景，白色文字

所以在IE用到了其支持的filter屬性，聽說這個屬性還有不同的效果，不單單就只有不透明度而已，所以抽個時間趕緊來充下電。

有時候我們很習(xí)慣的用到不透明屬性opacity來增加層次感或者增加用戶體驗，但因這個屬性是css3屬性，所以對于低級瀏覽器的兼容性來說就達(dá)不到我們預(yù)期的效果。一般而言，我們都盡可能少用一些瀏覽私有屬性-webkit,-moz,-ms,-o，這也僅僅解決了市面上很多瀏覽器的問題，面對IE，特別是IE9-版本的，也是顯得有氣無力。因此假如要使得市面上的瀏覽器達(dá)到統(tǒng)一的近類似效果，那么是非常有必要寫上IE私有屬性，觸發(fā)IE hasLayout 特性，比如這樣：

.opacity{
    opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*IE6~IE8*/
}

OK，這樣的代碼可以基本兼容目前市面上的瀏覽器。今天我們的重點是后面這個 filter 屬性

其實這個filter是CSS1的屬性了，但是因為老版本的IE4.0~IE9對此支持不怎么感冒，對瀏覽器的支持也不穩(wěn)定，因此這個屬性只能當(dāng)做實驗性技術(shù)來觀察。但，對于想要探究IE的filter是怎樣模擬像css3工作原理的同行不妨可以充充電。

此屬性我個人概況為css PS化，為什么，因為它的很多屬性或多或少是從PS衍伸進(jìn)來的，如圖

就連我們用css3來寫一個華麗麗的轉(zhuǎn)場動畫時，我們也可以考慮讓我們的ie同樣具有此功能，那么ie中的filter就體現(xiàn)出來了。。

在ie中 filter 分為靜態(tài)濾鏡(Visual Filters)和過渡轉(zhuǎn)場(Transitions Reference)，前者是的效果可以設(shè)置元素的不透明度、漸變、模糊、對比度、明度等這些，后者注重的ie的動畫效果。

對于在使用ie filter屬性時，必要的前綴是需要的，對此ie在filter規(guī)范如下：

.test{
    filter:progid:DXImageTransform.Microsoft.    /*.后面都是緊跟著各種濾鏡和轉(zhuǎn)場函數(shù)*/
}

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

對于為什么要在開頭寫上progid:DXImageTransform.Microsoft 不是很清楚，估計是為了區(qū)分吧。有哪位知道麻煩貼個地址說一下哈。

1.AlphaImageLoader，這個屬性是主要是針對png透明圖片進(jìn)行不透明度的處理，為什么要這么說呢，因為IE6的png透明圖片其實是不透明的，顯示會灰色背景。

語法：

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

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

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

2.Gradient，漸變?yōu)V鏡。

語法：

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

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

稍有留意我們看了下面的style屬性的時候其實就會發(fā)現(xiàn)，StartColorStr中的值跟我們平常的用到的#ffffff是不一樣的，如圖

寫著寫著發(fā)現(xiàn)這個 filter 屬性很多，估計篇幅很大，那么就暫時分上下篇來寫好了，不然篇幅實在過大，寫的人都要掛了，何況看的人能這么蛋疼看下去？

1.Alpha，調(diào)整對象內(nèi)容的不透明度。

語法：

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

Style，設(shè)置或者調(diào)整不透明度的風(fēng)格。0代表默認(rèn)值，1代表線性不透明，2代表徑向漸變，3代表矩形漸變

Opacity，設(shè)置或調(diào)整不透明度值。0~100值，其中0默認(rèn)值表示全透明，100為全不透明

FinishOpacity，設(shè)置或調(diào)整最后不透明度值。0~100值，其中0默認(rèn)值表示全透明，100為全不透明

StartX，設(shè)置或調(diào)整水平不透明最開始位置，默認(rèn)值為0，即從對象最左邊開始。

FinishX，設(shè)置或調(diào)整水平不透明度結(jié)束位置，默認(rèn)值為0

StartY，設(shè)置或調(diào)整垂直方向不透明度開始位置，默認(rèn)值為0

FinishY，設(shè)置或調(diào)整垂直不透明度結(jié)束位置，默認(rèn)值為0

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

2.BasicImage，調(diào)整對象的內(nèi)容的顏色處理、圖像旋轉(zhuǎn)或不透明度。

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

GrayScale ，設(shè)置或調(diào)整對象的灰度值。

Invert ，設(shè)置或調(diào)整對象的反相。

Opacity ，設(shè)置或調(diào)整對象的不透明度。

Mask ，設(shè)置或調(diào)整對象的的RGB是否為MashColor值，0默認(rèn)值，顯示正常RGB值，1表示改變內(nèi)容為MashColor（不常用）

Mirror ，設(shè)置或調(diào)整對象鏡像。0正常顯示，1內(nèi)容對象將翻過來。

Rotation ，設(shè)置或調(diào)整對象旋轉(zhuǎn)，0正常顯示，1代表旋轉(zhuǎn)90°，2代表旋轉(zhuǎn)180°，3代表旋轉(zhuǎn)270°

XRay ，設(shè)置或調(diào)整對象的X射線，布爾值，0正常顯示，1代表X射線，有點像我們?nèi)メt(yī)院拍X光一樣的效果。

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

3.Blur，設(shè)置對象的模糊值。

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

PixelRadius，設(shè)置對象的模糊半徑，1~100數(shù)值。

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

ShadowOpacity，設(shè)置對象投影不透明度，0.0~1.0，假如MakeShadow為false那么該值無效。

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

**4.Chroma **，設(shè)置對象的色彩透明度

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

Color，設(shè)置顏色值。

不妨用你的手中的IE6~8來預(yù)覽一下官方demo→Chroma Filter

**5.Compositor **，設(shè)置新對象內(nèi)容的合成顏色，這個翻譯有點拗口，大概的意思就是：2個對象，要顯示哪個或者隱藏哪個，或者顯示他們對比之后的新對象。

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

其中function值有18個值，很多很多。也不一一說了，有興趣的的前往這里看demo→Compositor Filter

**6.DropShadow **，設(shè)置對象的投影效果。

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

OffX，設(shè)置投影的X位移，單位數(shù)值，默認(rèn)值為5

OffY，設(shè)置投影的Y位移，單位數(shù)值，默認(rèn)值為5

Color，設(shè)置投影的顏色值

Positive，設(shè)置投影的透明或者非透明。

之前有寫過一篇關(guān)于css3的shadow文章，有時間的也可以點點。。。

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

**7.Emboss **，設(shè)置對象的浮雕效果。

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

一般來說Bias屬性不需要設(shè)置，可以忽略，官方demo→Emboss Filter

**8.Engrave **，設(shè)置對象的雕刻效果。

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

一般來說Bias屬性不需要設(shè)置，可以忽略，官方demo→Engrave Filter

**9.Glow **，設(shè)置對象的光暈效果。

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

color，設(shè)置光暈顏色。

Strength，設(shè)置光暈的寬度，數(shù)值單位

官方demo→Glow Filter

**10.Light **，設(shè)置對象的亮度

filter:progid:DXImageTransform.Microsoft.Light()

addAmbient，加入對象環(huán)境光

addCone ，加入錐形光源

addPoint 加入點光源

changeColor ，改變亮度顏色

changeStrength，改變亮度長度

clear，清除亮度

moveLight，移動光源焦點。

官方demo→Light Filter

**11.ICMFilter **，設(shè)置對象顏色內(nèi)容改變，使其顯示像打印設(shè)備的顏色。

官方無demo，IE9時，這個濾鏡僅僅應(yīng)用于屏幕內(nèi)容顯示效果上，當(dāng)內(nèi)容是打印時，將不應(yīng)用。

**12.MaskFilter **，設(shè)置對象內(nèi)容透明或者非透明顏色。

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

13.Matrix，調(diào)整大小、旋轉(zhuǎn)或翻轉(zhuǎn)使用矩陣的內(nèi)容對象轉(zhuǎn)換。

filter:progid:DXImageTransform.Microsoft.Matrix()

可以設(shè)置各種角度的旋轉(zhuǎn)，官方demo→Matrix Filter

14.MotionBlur，設(shè)置對象模糊，測試完demo之后感覺有點像線性模糊，就是月光投射下來不均勻的模糊效果。

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

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

Strength ，設(shè)置對象模糊范圍，單位數(shù)值，初始值為5

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

官方demo→MotionBlur Filter

15.Wave，設(shè)置對象為波浪紋濾鏡效果

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

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

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

Phase，相對偏移值，0~100數(shù)值

Strength，設(shè)置波浪強度，默認(rèn)值為5，數(shù)值越大，波浪效果越明顯。

Frep，設(shè)置波浪頻率，默認(rèn)值為3，數(shù)值越大，波浪效果越明顯。

官方demo→Wave Filter

16.Shadow，設(shè)置對象陰影效果。

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

Color，設(shè)置陰影顏色。

Direction，設(shè)置陰影的方向，角度也是從0°~315°取值（跟PS的投影效果非常的相似。）

Strength，設(shè)置投影強度，數(shù)值越大越模糊。

官方demo→ Filter

總的來說，目前假如要用到的基本都是Alpha、shadow、Blur、DropShadow這些常規(guī)數(shù)值比較多。對于其他的值估計也不會感冒，在這里只是做一個介紹，更多詳細(xì)可以點擊參考資料。

對了，剛開始我用打字的形式打了IE濾鏡前綴progid:DXImageTransform.Microsoft，但是測試之后沒有效果，原來是我把Image寫到小寫i因此，建議假如有需要設(shè)置的朋友，直接Ctrl+c以免出錯，不過假如你平常習(xí)慣寫駝峰寫法，那么估計你就不會像我出錯這么多了。

Just. all,goodnight

參考資料：

http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx

via 前端觀察