css滤镜代码实例.docVIP

word格式文档 专业整理 CSS滤镜:Mask属性 /school · 2004-12-31 14:29:41 · 来源: 0 　Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单： 　　Filter：Mask（Color=颜色） 　　只有一个Color参数，用来指定使用什么颜色作为掩膜。 　　同样，我们来看一下一幅图片在加上mask属性前后的效果（见下图）： 原　图 Mask属性效果图 　　 加上MASK属性的效果就好象是在用有色眼镜看物体一样。上面的效果的代码如下： 　　html　　　 head 　　　 title mask filter /title 　　　 style//*设置CSS样式开始*// 　　　 !-- 　　　　div{position：absolute；top：20；left：40；　　　　filter：mask(color：#666699)；} 　　　 //*定义DIV区域的样式，绝对定位，mask属性的color参数值指定用什么颜色遮　　　 住对象*// 　　　　p{font-family：bailey；font-size：72pt；　　　　　font-weight：bold；color：#FF9900；} 　　　 //*定义P区域内的样式，字体名称、大小、粗细、前景色*// 　　　　-- 　　　 /style 　　　 /head 　　　 body 　　　 div 　　　 p wenyleaf /p 　　　 /div 　　　 /body 　　/html 　　其实，您就算在代码中去掉对字体前景色的定义，得到的效果还是一样的。因为有了Mask属性的定义，它遮罩下的字体颜色的设置就已经失去了意义。 　　还有一点需要您注意的地方，mask属性对图片文件的支持还是不够，不能达到应该有的效果。 CSS滤镜:blur属性 /school · 2004-12-31 14:28:25 · 来源: 0 假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。 　　先来看一下blur属性的表达式： 　　filter：blur（add=add，direction，strength=strength） 　　我们看到blur属性有三个参数：add、direction、strength。 　　Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。 　　　Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表： ? 　　Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。　　还是看一个例子吧。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ html? head???? titleblur css/title???? script??????? function handlechange(obj)??????? {????????? with(obj.filters(0))????????? {??????????? if (strength255)??????????? {???????????? strength +=2;???????????? direction +=45;??????????? }????????? }??????? }???? /script?/head ?body??? pimg id =img1 src=jsimg/1.jpg style=filter:blur(strength=1)???????? onfilterchange=handlechange(this)??? /p?/body/html ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 看起来是不是有些像万花筒，在这个例子中加入了一些JavaScript的语句，代码如下： 　　html 　　　head 　　　titleblur css/title 　　　script 　　　function handlechange(obj) 　　　//*设置一个循环函数handlechange，对象是obj*// 　　　{ with(obj.filters(0))//*Obj的filter属性*// 　　　 { if (strength255)//*设置循环条件*// 　　　　 { strength +=1；direction +=45