滤镜名 说明
Alpha 让HTML元件呈现出透明的渐进效果
Blur 让HTML元件产生风吹模糊的效果
Chroma 让图像中的某一颜色变成透明色
DropShadow 让HTML元件有一个下落式的阴影
FlipH 让HTML元件水平翻转
FlipV 让HTML元件垂直翻转
Glow 在元件的周围产生光晕而模糊的效果
Gray 把一个彩色的图片变成黑白色
Invert 产生图片的照片底片的效果
Light 在HTML元件上放置一个光影
Mask 利用另一个HTML元件在另一个元件上产生图像的遮罩
Shadow 产生一个比较立体的阴影
Wave 让HTML元件产生水平或是垂直方向上的波浪变形
XRay 产生HTML元件的轮廓，就像是照X光一样
Alpha 滤镜参数详解
参数名 说明 取值说明
Opacity 不透明的程度，百分比。 从0到100，0表是完全透明，100表示完全不透明。
FinishOpacity 这是一个同Opacity一起使用的选择性的参数，当同时Opacity和FinishOpacity时，可以制作出透明渐进的效果，比较酷。 从0到100，0表是完全透明，100表示完全不透明。
Style 当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。 0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形辐射。
StartX 渐进开始的 X 坐标值
StartY 渐进开始的 Y 坐标值
FinishX 渐进结束的 X 坐标值
FinishY 渐进结束的 Y 坐标值
Html代码
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div class="transparent_class">测试透明度</div> </body> </html>
CSS代码：
.transparent_class { /* Required for IE 5, 6, 7 */ /* ...or something to trigger hasLayout, like zoom: 1; */ width:300px; height:300px; line-height:300px; text-align:center; background:#000; color:#fff; /* older safari/Chrome browsers */ -webkit-opacity: 0.5; /* Netscape and Older than Firefox 0.9 */ -moz-opacity: 0.5; /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/ -khtml-opacity: 0.5; /* IE9 + etc...modern browsers */ opacity: .5; /* IE 4-9 */ filter:alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); }
需要声明的是，如果你要同时使用filter和-ms-filter，请将-ms-filter写在filter的前面
-msfilter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first
filter: alpha(opacity=50); // second