语法: 

  1.  filter:filtername(fparameter1,fparameter2...)


(Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数)
滤镜说明：
Alpha：设置透明层次.
blur：创建高速度移动效果，即模糊效果.
Chroma：制作专用颜色透明.
DropShadow：创建对象的固定影子.
FlipH：创建水平镜像图片.
FlipV：创建垂直镜像图片.
glow：加光辉在附近对象的边外.
gray：把图片灰度化.
invert：反色.
light：创建光源在对象上.
mask：创建透明掩膜在对象上.
shadow：创建偏移固定影子.
wave：波纹效果.
Xray：使对象变的像被x光照射一样.

1、滤镜：Alpha

语法：filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity，Style=style,StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)
说明：
Opacity：起始值，取值为0～100, 0为透明，100为原图。
FinishOpacity：目标值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity=”0”,FinishOpacity=”75”,2)

2、滤镜：blur

语法：filter:Blur(Add = add, Direction = direction, Strength = strength)
说明：
Add：一般为1，或0。
Direction：角度，0～315度，步长为45度。
Strength：效果增长的数值，一般5即可。
例子：filter:Blur(Add=”1”,Direction=”45”,Strength=”5”)

3、滤镜：Chroma

语法：filter:Chroma(Color = color)
说明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color=”#FFFFFF”)

4、滤镜：DropShadow

语法：filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)
说明：Color:#rrggbb格式，任意。
Offx：X轴偏离值。
Offy：Y轴偏离值。
Positive：1或0。
例子：filter:DropShadow(Color=”#6699CC”,OffX=”5”,OffY=”5”,Positive=”1”)

5、滤镜：FlipH

语法：filter:FlipH
例子：filter:FlipH

6、滤镜：FlipV

语法：filter:FlipV
例子：filter:FlipV

7、滤镜：glow

语法：filter:Glow(Color=color, Strength=strength)
说明：
Color：发光颜色。
Strength：强度(0－100)
例子：filter:Glow(Color=”#6699CC”,Strength=”5”)

8、滤镜：gray

语法：filter:Gray
例子：filter:Gray

9、滤镜：invert

语法：filter:Invert
例子：filter:Invert

10、滤镜：mask

语法：filter:Mask(Color=color)
例子：filter:Mask (Color=”#FFFFE0”)

11、滤镜：shadow

语法：filter:Shadow(Color=color, Direction=direction)
说明：
Color：#rrggbb格式。
Direction：角度，0－315度，步长为45度。
例子：filter:Shadow (Color=”#6699CC”, Direction=”135”)

12、滤镜：wave

语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase， Strength=strength)
说明：
Add：一般为1，或0。
Freq：变形值。
LightStrength：变形百分比。
Phase：角度变形百分比。
Strength：变形强度。
例子：filter: wave(Add=”0”, Phase=”4”, Freq=”5”, LightStrength=”5”, Strength=”2”)

13、滤镜：Xray

语法：filter:Xray
例子：filter:Xray;

14.颜色变化

语法：
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=”#B5CCFA”, EndColorStr=”#B5CCFA”);



Filter 为微软的专有技术，并被应用到 IE4.0 及以上的 IE 浏览器中，所以只有 IE 支持。其他浏览器中对 Filter 无任何效果。调用 Filter 对应的 DOM 对象将会出错。
IE4.0 以上版本的 IE 浏览器中可以通过 CSS 在网页中应用多种多媒体样式的视觉效果，这就是微软的 Filter 技术。随着 IE 版本的增加，并在各版本中不断的加强 Filter 效果。通过将 Filter 与脚本的结合，可以在页面中实现各种复杂的特效，如半透明、阴影、投影、遮罩、模糊、渐变、波浪、图片翻转等效果。

透明效果：filter:alpha(opacity=50);
黑白照片：filter: gray;
X光照片：filter: Xray;
风动模糊：filter: blur(add=true,direction=45,strength=30);
正弦波纹：filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果：filter: Alpha(Opacity=50);
线型透明：filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明：filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明：filter: Chroma(Color=#FFFFFF);
降低色彩：filter: grays;
底片效果：filter: invert;
左右翻转：filter: fliph;
垂直翻转：filter: flipv;
投影效果：filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克：filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果：filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果：filter:alpha(opacity=100, finishOpacity=0,style=2;
许多 Filter 中的特效均已进入了 CSS3 草案，并在新版的非 IE 浏览器中得到了很好的支持。
Microsoft.AlphaImageLoader滤镜讲解
Microsoft.AlphaImageLoader 是IE滤镜 的一种，其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片，但是就IE5-IE6而言还是有一定的意义。
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled= bEnabled , sizingMethod=sSize , src= sURL )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值 。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值 。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
特性：
Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。
src : 可读写。字符串(String)。参阅 src 属性。
说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
示例：
#idDiv{
position:absolute;
left:140px;
height:400;
width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’rain1977.gif’,sizingMethod=’scale’);
}
.dream{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/earglobe.gif’);
}

P.S. 当想使用backgroundimage属性时，如果不想让图片原尺寸显示，而是类似于IMG width=100% heigth=100% 的效果，可以通过此filter实现。

Css代码 收藏代码
span.style.filter=”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’test.jpg’, sizingMethod=’scale’)”;
引用：最后说说关于FF和IE效果调和问题。这个滤镜效果只适用于IE,在FF下面无法显示，我想这是前辈说他很难实现的最终问题了。以往我们用或者来修复IE下和FF的区别．这一次是要找方法修复FF不能实现的问题.
其实想到的话,也很简单了.就是先让FF正常显示该图片,然后,用或__来清除IE下的显示效果，最后用*或_ 来做以上的滤镜效果。大功告成！
以上是官方的说明。事实上实际操作中需要注意:AlphaImageLoader滤镜会导致该区域的链接和按钮无效，一般情况下的解决办法是为链接或按钮 添加：position:relative使其相对浮动 要注意的是，当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议 使用浮动办法处理。
具体操作：
为预览区域（比如要在某个 div 中预览）添加样式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
为 AlphaImageLoader 设置 src 属性。
filter.rar