IE中CSS-filter濾鏡小知識大全

前言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')

  • 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

 

官方參考資料:

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

相關文章
相關標籤/搜索