IE中CSS-filter濾鏡小知識大全
前言
前段時間在做一個專題的時候用到了opacity
不透明度屬性,因為設計圖上是半透明背景,白色文字
有時候我們很習慣的用到不透明屬性opacity
來增加層次感或者增加使用者體驗,但因這個屬性是css3屬性,不相容IE8及其以下版本。一般要儘可能少用一些瀏覽私有屬性-webkit,-moz,-ms,-o。但如果要相容各個主流瀏覽器,那麼是非常有必要寫上IE私有屬性,觸發IE hasLayout 特性,比如這樣:
.opacity{ opacity:0.5; /*數值是0-1,0表示透明*/ filter:alpha(50); /*IE6-IE7,數值是0-100的任意整數,0表示透明*/ filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*IE8,數值是0-100的任意整數,0表示透明*/ }
接下來重點介紹 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個可選值,一個必選值。
屬性 | 特性 | 描述 |
---|---|---|
enabled | Enabled | 可選值,Boolean布林值,預設值為true,啟用過濾器;false為不啟用過濾器。所有的filter都有該屬性值,下面不一一多說。 |
sizingMethod | sizingMethod | 可選值,設定或檢索的方式來顯示一個影象在物件邊界顯示方式。有三個值:crop裁剪影象以適應物件的尺寸;image,預設值,擴大或減少物件的邊界,以適應影象的尺寸;scale,伸展或收縮影象填充物件的邊界; |
src | src | 必須值,引入圖片。 |
不妨用你的手中的IE6~8來預覽一下官方demo→AlphaImageLoader
2.Gradient,漸變濾鏡。
用途:IE9及其之前的版本不支援CSS3漸變屬性Gradient,可以通過IE的這個漸變濾鏡來實現簡單的漸變。
語法:
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是不一樣的。StartColorStr總共有8位,前兩位是透明度。
二、filter靜態濾鏡
1.Alpha,調整物件內容的不透明度。
用途:IE8及其之前版本不支援rgba,IE9及其之前版本不支援hsla。可以用rgb、hsl來設定背景色,再加上透明度濾鏡,以此來實現背景的透明。
語法:
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,設定物件陰影效果。
用途:IE8及其之前版本不支援box:shadow屬性,可以通過IE的陰影濾鏡來實現。
語法:
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
參考資料:
via 前端觀察