css滤镜

css滤镜

Css的滤镜标识符是filter，语法格式如下：

{filter:filtername(parameters)}

若对一个对象使用多个滤镜，则每个滤镜之间用空格分隔开；一个滤镜中的若干个参数用逗号分隔；filter属性和其他样式属性并用时以分号分隔。

属性值	含义
Alpha	设置透明度
BlendTrans	实现图像之间的淡入和淡出的效果
Blur	建立模糊效果
Chroma	设置对象中指定的颜色为透明色
DropShadow	建立阴影效果
FlipH	将元素水平翻转
FlipV	将元素垂直翻转
Glow	建立外发光效果
Gray	灰度显示图像，即显示为黑白图像
Invert	图像反相，包括色彩、饱和度和亮度值，类似底片效果
Light	设置光源效果
Mask	建立透明遮罩
RevealTran	建立切换效果
Shadow	建立另一种阴影效果
Wave	波纹效果
Xray	显示图片的轮廓，类似于X光片效果

1.alpha滤镜

能实现针对图片文字元素的“透明”效果，这种透明效果是通过“把一个目标元素和背景混合”来实现的，混合程度可以由用户指定数值来控制。可以应用于图片和文字。

语法格式

{filter:Alpha(enabled=bEnabled,style=iStyle,opacity=iOpacity,finishOpacity=iFinishOpacity,startx=iPercent,starty=iPercent,finishx=iPercent,finishy=iPercent)}

选项含义如下表

参数	说明
enabled	设置滤镜是否激活
style	设置透明渐变的样式，也就是渐变显示的形状，取值为0~3。0表示无渐变，1表示线形渐变，2表示圆形渐变，3表示矩形渐变
opacity	设置透明度，值范围是0~100。
finishOpacity	设置结束时透明度，值范围是0~100。
startx	设置透明渐变开始点的水平坐标（即x坐标）
starty	设置透明渐变开始点的垂直坐标（即y坐标）
finishx	设置透明渐变结束点的水平坐标
finishy	设置透明渐变结束点的垂直坐标

2.BlendTrans滤镜

是一种高级滤镜，要实现效果，需要结合JavaScript，实现HTML对象的渐隐渐现效果。

语法格式

{filter:BlendTrans(enabled=bEnabled,duration=fDuration)}

Enabled表示是否激活滤镜

Duration表示整个转换过程所需要的时间，单位为秒

3.Blur滤镜

实现页面模糊效果，即在一个方向上的运动模糊。

语法格式

{filter:Blur(enabled=bEnabled,add=iadd,direction=iDirection,strength=fStrength)}

属性值及含义见下表

参数	说明
enabled	设置滤镜是否激活
add	指定图片是否改变模糊效果。这是个布尔参数，有效值为True或False。True是默认值，表示应用模糊效果。
direction	设定模糊方向。模糊的效果是按顺时针方向起作用的，取值范围为0~360°，45°为一个间隔。有8个方向值：0表示向上，45表示右上，90表示向右，135表示右下，180表示向下，225表示左下，270表示向左，315表示左上。
strength	指定模糊半径大小，单位是像素，默认值为5，取值范围为自然数，该取值决定了模糊效果的延伸范围。

4.Chroma滤镜

可以设置HTML对象中指定的颜色为透明色。一般用于文字特效，对于某些格式的图片也是不适用的。

语法格式

{filter:Chroma(enabled=bEnabled,color=sColor)}

Color参数设置要变为透明色的颜色

5.DropShadow滤镜

建立阴影效果。

语法格式

{filter:DropShadow(enabled=bEnabled,color=sColor,offx=iOffsetx,offy=iOffsety,positive=bPositive)}

参数与含义如下表

参数	说明
enabled	设置滤镜是否激活
color	指定滤镜产生的阴影颜色
offx	指定阴影水平方向偏移量，默认值为5px
offy	指定阴影垂直方向偏移量，默认值为5px
positive	指定阴影透明效果，为布尔值。True(1)表示任何非透明像素建立可见的阴影；False(0)表示为透明的像素部分建立透明效果。

6.FlipH滤镜

实现对HTML对象水平翻转效果。

语法格式

{filter:FlipH(enabled=bEnabled)}

7.FlipV滤镜

实现对HTML对象垂直翻转效果。

语法格式

{filter:FlipV(enabled=bEnabled)}

8.Glow滤镜

可以是对象的边缘产生一种柔和的边框或光晕，并可以产生如火焰一样的效果。

语法格式

{filter:Chroma(enabled=bEnabled,color=sColor,strength=iDistance)}

Color参数设置边缘光晕颜色

Strength设置晕圈范围，值范围是1~255，值越大效果越强。

9.Gray滤镜

将彩色图片变为黑白图片。

语法格式

{filter:Gray(enabled=bEnabled)}

10.Invert滤镜

可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值，使图片产生一种“底片”或负片的效果。

语法格式

{filter:Invert(enabled=bEnabled)}

11.Light滤镜

是一个高级滤镜，需要结合JavaScript使用，用来产生类似于光照灯效果，并调节亮度以及颜色。

语法格式

  {filter:Light(enabled=bEnabled)}

对于已定义的Light属性，可以调用它的方法（Method）来设置或改变属性。这些方法如下表所示。

参数	说明
AddAmbIE9.0nt	加入包围的光源
AddCone	加入锥形光源
AddPoint	加入点光源
Changcolor	改变光的颜色
Changstrength	改变光源的强度
Clear	清除所有的光源
MoveLight	移动光源

12.Mask滤镜

可以通过遮罩mask，为网页中的元素对象做出一个矩形遮罩，即使用一个颜色图层将包含有文字或图像等对象的区域遮盖，但是文字或图像部分却以背景色显示出来。

语法格式

{filter:Mask(enabled=bEnabled,color=sColor)}

参数color用来设置Mask滤镜作用的颜色

13.RevealTrans滤镜

能够实现图像之间的切换效果。切换时，能产生32种动态效果，可以随机选取其中一种效果进行切换。

语法格式

{filter:RevealTrans(enabled=bEnabled,duration=fDuration,transition=iTransition)}

参数duration用来设置切换停留时间，transition用于指定转换方式。

动态效果	参数值	动态效果	参数值
矩形从大至小	0	随机溶解	12
矩形从小至大	1	从上下向中间展开	13
圆形从大至小	2	从中间向上下展开	14
圆形从小至大	3	从两边向中间展开	15
向上推开	4	从中间向两边展开	16
向下推开	5	从右上向左下展开	17
向右推开	6	从右下向左上展开	18
向左推开	7	从左上向右下展开	19
垂直百叶窗	8	从左下向右上展开	20
水平百叶窗	9	随机水平细纹	21
水平棋盘	10	随机垂直细纹	22
垂直棋盘	11	随机选取一种效果	23

14.Shadow滤镜

给对象添加阴影效果。

语法格式

{filter:Shadow(enabled=bEnabled,color=sColor,direction=iOffset,strength=iDistance)}

 参数含义如下表所示

参数	说明
enabled	设置滤镜是否激活
color	设置投影的颜色
direction	设定投影方向。分别有8种取值代表8种方向，取值为0表示向上，45为右上，90为右，135为右下，180为向下，225为左下方，270为左方，315为左上方。
strength	设置投影向外扩展的距离

15.Wave滤镜

为对象添加竖直方向上得波纹效果，也可以用来把对象按照竖直方向的波纹样式打乱。

语法格式

{filter:Wave(enabled=bEnabled,add=bAddImage,freq=iWaveCount,lightStrength=iPercentage,phase=iPercentage,strength=iDistance)}

 参数含义如下表所示

参数	说明
enabled	设置滤镜是否激活
add	布尔值，表示是否在原始对象上显示效果。True表示显示，False表示不显示
freq	设置生成波纹的频率，也就是设定在对象上产生的完整的波纹的条数
lightStrength	波纹效果的光照强度，取值0—100
phase	设置正弦波开始的偏移量，取百分比值为0—100，默认值为0。 25就是360°×25%为90°，50则为180°
strength	波纹曲折的强度

16.Xray滤镜

可以使对象反映出它的轮廓，并把这些轮廓的颜色加亮，使整体看起来会有一种X光片的效果。

语法格式

{filter:Wave(enabled=bEnabled)}