前言css
前段時間在作一個專題的時候用到了opacity不透明度屬性,由於設計圖上是半透明背景,白色文字html
因此在IE用到了其支持的filter屬性,據說這個屬性還有不一樣的效果,不僅僅就只有不透明度而已,因此抽個時間趕忙來充下電。css3
有時候咱們很習慣的用到不透明屬性opacity來增長層次感或者增長用戶體驗,但因這個屬性是css3屬性,因此對於低級瀏覽器的兼容性來講就達不到咱們預期的效果。通常而言,咱們都儘量少用一些瀏覽私有屬性-webkit,-moz,-ms,-o,這也僅僅解決了市面上不少瀏覽器的問題,面對IE,特別是IE9-版本的,也是顯得有氣無力。所以假如要使得市面上的瀏覽器達到統一的近相似效果,那麼是很是有必要寫上IE私有屬性,觸發IE hasLayout 特性,好比這樣:web
.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衍伸進來的,如圖spa
就連咱們用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是不同的,如圖
2、filter靜態濾鏡
1.Alpha,調整對象內容的不透明度。
語法:
filter:progid:DXImageTransform.Microsoft.Alpha()
/*完整寫法*/ filter:progid:DXImageTransform.Microsoft.Alpha(enabled='ture',GradientType='1',StartColorStr='#00000000',EndColorStr='#FFFF3300')
不妨用你的手中的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')
不妨用你的手中的IE6~8來預覽一下官方demo→BasicImage Filter
3.Blur,設置對象的模糊值。
語法:
filter:progid:DXImageTransform.Microsoft.Blur()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='x', MakeShadow='x', ShadowOpacity='x')
不妨用你的手中的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')
以前有寫過一篇關於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='')
官方demo→Glow Filter
**10.Light **,設置對象的亮度
語法:
filter:progid:DXImageTransform.Microsoft.Light()
官方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='')
官方demo→MotionBlur Filter
15.Wave,設置對象爲波浪紋濾鏡效果
語法:
filter:progid:DXImageTransform.Microsoft.Wave()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Wave(Add='', LightStrength='', Phase='', Strength='', Freq='')
官方demo→Wave Filter
16.Shadow,設置對象陰影效果。
語法:
filter:progid:DXImageTransform.Microsoft.Shadow()
/*完整寫法*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='', Direction='', Strength='')
官方demo→ Filter
官方參考資料:
http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx