前言

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

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

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

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

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

filter歷史

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

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

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

一、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個可選值，一個必選值。

2.Gradient，漸變濾鏡。

語法：

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

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

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

二、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，設定顏色值。

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

5.Compositor

設定新物件內容的合成顏色，這個翻譯有點拗口，大概的意思就是：2個物件，要顯示哪個或者隱藏哪個，或者顯示他們對比之後的新物件。

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

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

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，設定投影的透明或者非透明。

之前有寫過一篇關於css3的shadow文章，有時間的也可以點點。。。

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

7.Emboss，設定物件的浮雕效果。

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

一般來說Bias屬性不需要設定，可以忽略，官方demo→Emboss Filter

8.Engrave，設定物件的雕刻效果。

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

一般來說Bias屬性不需要設定，可以忽略，官方demo→Engrave Filter

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()  

可以設定各種角度的旋轉，官方demo→Matrix Filter

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，設定投影強度，數值越大越模糊。

後話

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

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

Just. all,goodnight