深入透析表滤镜上.pdfVIP

*********************************************************

华中安全网

：

专业的技术站点的技术培训

规模最大、实力最强、信誉技术培训站点

注：本只做技术交流，请不要用作用途

*********************************************************

学习专业的技术请报名会员

讲师：默爱

课题：CSS系列课程第十五课深入透析样式表滤镜(上)

一、什么是样式表滤镜

说到滤镜，其实它并不是对图像进行了什么处理，而是在浏览器中对使用了该属性的对象进行一定的修饰。样式表滤镜实际上是样

式表一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上，例如、

文本、以及其他一些对象，为页面添加一些丰富的变化。如果大家有一些语言的基础，能够把滤镜效果与类似javascript的脚

本代码做一些结合，就可以拥有一个在样式表滤镜与共同作用下建立的强大的动态交互文档工具。现在能使用的滤镜有13个

之多，不过要欣赏到这些滤镜的特效，必须要求用户的浏览器必须在IE4.0/NC6.0之上，因为只有这些版本的浏览器才能支持样式

表滤镜效果。

二、常用的样式表滤镜

随着样式表技术的不断成熟，其滤镜功能和种类也在不断增多。如果用户能够熟练地混合使用它们，将可以产生意想不到的效果。

在操作上，用户只需要了解具体滤镜的实际效果后，就能根据实际进行微调了。为了使大家能有针对性地使用滤镜，笔者下面就把

一些常用滤镜的功能和参数详细介绍如下：

1、α滤镜

作用：该滤镜可以实现各种溶入效果，如果大家将该滤镜与网页语言结合起来，对滤镜的参数进行处理的话，就能很轻易地做

出淡入淡出的效果来。

语法：{FILTER：ALPHA(opacity=opacity，finishopacity=finishopacity，

style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy)}

参数：Opacity参数代表图象的起始，其默认的数值是从0到100，0代表完全透明，100代表完全不透明；FinishOpacity是

一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的，作用范围也是0到100；Style表示透明区

域的形状特征，其中“0”代表统一形状，“1”代表线形。“2”代表状，“3”代表矩形；startx表示渐变透明效果开始处的X坐标，starty

代表渐变透明效果开始处的Y坐标，finishx代表渐变透明效果结束处的X坐标，finishy表示渐变透明效果结束处的Y坐标。

2、模糊滤镜

作用：该滤镜主要是让图象产生一种模糊效果。

语法：{filter:blur(add=add，direction=direction，strength=strength)}