不得不收藏的——IE中CSS-filter濾鏡小知識大全

前言

前段時間在作一個專題的時候用到了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就體現出來了。。

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，設置顏色值。

不妨用你的手中的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，設置光暈的寬度，數值單位

官方demo→Glow Filter

**10.Light **，設置對象的亮度

filter:progid:DXImageTransform.Microsoft.Light()

• addAmbient，加入對象環境光

• addCone ，加入錐形光源

• addPoint 加入點光源

• changeColor ，改變亮度顏色

• changeStrength，改變亮度長度

• clear，清除亮度

• moveLight，移動光源焦點。

官方demo→Light Filter

**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表示不覆蓋

官方demo→MotionBlur Filter

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，數值越大，波浪效果越明顯。

官方demo→Wave Filter

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

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

• Color，設置陰影顏色。

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

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

官方demo→ Filter

後話

總的來講，目前假如要用到的基本都是Alpha、shadow、Blur、DropShadow這些常規數值比較多。對於其餘的值估計也不會感冒，在這裏只是作一個介紹，更多詳細能夠點擊參考資料。

對了，剛開始我用打字的形式打了IE濾鏡前綴progid:DXImageTransform.Microsoft，可是測試以後沒有效果，原來是我把Image寫到小寫i所以，建議假若有須要設置的朋友，直接Ctrl+c以避免出錯，不過假如你日常習慣寫駝峯寫法，那麼估計你就不會像我出錯這麼多了。

Just. all,goodnight

參考資料：

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

via 前端觀察