IE中CSS-filter滤镜小知识大全

待我称王封你为后i 2022-05-24 11:38 425阅读 0赞

前段时间在做一个专题的时候用到了`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); }

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个可选值，一个必选值。

属性

特性

描述

enabled

Enabled

可选值，Boolean布尔值，默认值为ture，启用过滤器；false为不启用过滤器。所有的filter都有该属性值，下面不一一多说。

sizingMethod

可选值，设置或检索的方式来显示一个图像在对象边界显示方式。有三个值：crop裁剪图像以适应对象的尺寸；image，默认值，扩大或减少对象的边界,以适应图像的尺寸；scale，伸展或收缩图像填充对象的边界；

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` 属性很多，估计篇幅很大，那么就暂时分上下篇来写好了，不然篇幅实在过大，写的人都要挂了，何况看的人能这么蛋疼看下去？*

## 二、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以免出错，不过假如你平常习惯写驼峰写法，那么估计你就不会像我出错这么多了。

原文链接：[http://blog.sina.com.cn/s/blog\_75ce41490102vpc3.html][http_blog.sina.com.cn_s_blog_75ce41490102vpc3.html]

[http_blog.sina.com.cn_s_blog_75ce41490102vpc3.html]: http://blog.sina.com.cn/s/blog_75ce41490102vpc3.html

IE中CSS-filter滤镜小知识大全

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS滤镜filter，让页面加上滤镜效果

相关 css filter 滤镜

相关 IE下滤镜实现background-size效果

相关 IE滤镜包括旋转角度、渐变

相关 FFmpeg中的滤镜(filter)知识点记录

相关【Photoshop】滤镜详解

相关 IE中CSS-filter滤镜小知识大全

相关滤镜，如此简单

相关图像滤镜艺术---水彩画滤镜

相关 css 滤镜属性