CSS filter滤镜的用法

《CSS filter滤镜的用法》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、filter:filtername(parameters)　即filter:滤镜名称（参数）滤镜效果         功能描述 Alpha           设置不同的透明度变化效果 (firefox为opacity->opacity:0.1)Blur            建立模糊效果 DropShadow     建立一种偏移的影象轮廓，即投射阴影 FlipH            水平翻转 FlipV            垂直翻转 Glow            为对象的边界增加色彩光效 Gray     

2、       将图片以灰度形式显示 Invert           将色彩、饱和度以及亮度值完全反转,类似底片效果 Light            在一个对象上进行灯光投影 Mask            为一个对象建立彩色透明遮罩 Shadow         为对象建立轮廓的影效果 Wave           在X轴和Y轴方向利用正弦波打乱图片 Xray            只显示对象的轮廓 具体的应用有两种方法：1、先定义好CSS，再在页面中需要的对象上使用预先定义好的CSS，实际上CSS的设置对话

3、框里已经预先将这些滤镜的语法设置好了，我们只需填上适合的具体参数即可：　　2、直接在支持CSS滤镜效果的HTML控件元素上编写CSSfilter代码。a.Alpha滤镜　　"Alpha"属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定各种不同范围的透明度。Alpha滤镜语法{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=st

4、artx,starty=starty,finishx=finishx,finishy=finishy)} 　　参数含义分别如下：参数说明 opacity透明度。默认的范围是从0到100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。 finishopacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0到100。 style指定透明区域的形状特征：0代表统一形状1代表线形2代表放射状3代表矩形 startx渐变透明效果开始处的X坐标。 start

5、y渐变透明效果开始处的Y坐标。 finishx渐变透明效果结束处的X坐标。 finishy渐变透明效果结束处的Y坐标。 b.Blur滤镜　　用手指在一幅尚未干透的画面迅速划过时，画面就会变得模糊。”Blur"就是产生同样的模糊效果。Blur滤镜语法HTML：{filter:blur(add=add,direction=direction,strength=strength)}Script语言：[oblurfilter=]object.filters.blur 　　参数含义分别如下：参数说明 add它指定图片是否被改变

6、成印象派的模糊效果。模糊效果是按顺时针的方向进行的，这是一个布尔值:ture（默认）或false direction该参数用来设置模糊的方向。0度代表垂直向上，每45度为一个单位，默认值是向左的270度 strength只能使用整数来指定，代表有多少像素的宽度将受到模糊影响，默认是5个像素。 c.DropShadow滤镜 　　“DropShaow"，顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上色彩。 DropShadow滤镜语法{filter:dropshadow(color=color,offx

7、=ofx,offy=offy,positive=positive)} 　　参数含义如下：参数说明 Color代表投射阴影的颜色 offxX方向阴影的偏移量 offyY方向阴影的偏移量 Positive布尔值如果为TRUE（非0），就为任何的非透明像素建立可见的投影如果为FASLE（0），就为透明的像素部分建立透明效果 d.FlipH,FlipV滤镜　　FlipH滤镜实现水平反转FlipH滤镜语法{filter:filph} 　　FlipV滤镜实现垂直反转 FlipV滤镜语法{filter:filpv} e.FlipH

8、,FlipV滤镜　　FlipH滤镜实现水平反转FlipH滤镜语法{filter:filph} 　　FlipV滤镜实现垂直反转 FlipV滤镜语法{filter:filpv} f.Glow滤镜　　对一个对象使用"glow"属性后，这个对象的边缘就会产生类似发光的效果。Glow滤镜语法{filter:glow(color=color,strengt