滤镜主要是用来实现图像的各种特殊效果。它在
Photoshop中具有非常神奇的作用。所以有的Photoshop都按分类放置在菜单中,使用时只需要从该菜单中执行这命令即可。滤镜的操作是非常简单的,但是真正用起来却很难恰到好处。滤镜通常需要同通道、图层等联合使用,才能取得最佳艺术效果。如果想在最适当的时候应用滤镜到最适当是位置,除了平常的美术功底之外,还需要用户的滤镜的熟悉和操控能力,甚至需要具有很丰富的想象力。这样,才能有的放矢的应用滤镜,发挥出艺术才华。
标识符
css滤镜的标识符是“filter”,总体的应用上和其他的css语句相同。
css滤镜可分为基本滤镜和高级滤镜两种。
css滤镜分类
可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等
脚本语言,能产生更多变幻效果的则称为高级滤镜。
通道
alpha滤镜用于设定透明度,它的表达式如下:
filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY)
其中opacity表示透明度等级,可选值从0~100,0代表完全透明,100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形。StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。
ie下实现方式filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 标准
浏览器(FF、Chrome、Opera)下实现方式:opacity: 0.5;
模糊滤镜
模糊滤镜给予对象朦胧神秘的效果,它的表达式如下:
filter:progid:DXImagetransform.microsoft.blur(makeshadow=makeshadow,pixelradius=pixelradius,shadowopacity=shadowopacity);
其中makeshadow代表是否处理为阴影,pixelradius表示模糊作用深度,shadowopacity表示阴影的透明度。
透明色
说明:color:#rrggbb格式,任意。
投射阴影
说明:Color:#rrggbb格式,任意。
Offx:X轴偏离值,设置值为整数,单位为像素;若水平往右移,则为正数;若水平往左移,则为负数。
Offy:Y轴偏离值,设置值为整数,单位为像素;若垂直往下移,则为正数;若垂直往上移,则为负数。
Positive:1或0。
水平翻转
例子:filter:FlipH
垂直翻转
例子:filter:FlipV;
外边界
光效
说明:
Color:发光颜色。
Strength:强度(0-100)
例子:filter:Gray
底片效果
例子:filter:Invert
透明膜
效果
阴影效果
语法:filter:Shadow(Color=color,Direction=direction)
说明:
Color:#rrggbb格式。
Direction:用于设定动态模糊效果的方向,总单位为360°,0代表垂直向上,并以每45°为一个单位,而度数以方向定位时,将如右图1所示:
wave
正弦波纹打乱图片效果
语法:filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
说明:
Add:一般为1,或0。
Freq:变形值。
LightStrength:变形百分比。
Phase:角度变形百分比。
Strength:变形强度。
显示轮廓
例子:filter:Xray