【CSS】css的filter属性

Filter：

 

滤 镜 名	说 明	滤 镜 名	说 明
Alpha	设置透明度	Blur	设置模糊效果
Chroma	设置指定颜色透明	Dropshadow	设置投射阴影
Fliph	水平翻转	Flipv	垂直翻转
Glow	对象的外边界增加光效	Grayscale	设置灰度(降低图片的色彩度)
Invert	设置底片效果	Light	设置灯光投影
Mask	设置透明膜	Shadow	设置阴影效果
Wave	利用正弦波纹打乱图片	Xray	只显示轮廓

 

Alpha 设置透明度

Blur 设置模糊效果 
Chroma 设置指定颜色透明 

Dropshadow 设置投射阴影 
Fliph 水平翻转 

Flipv 垂直翻转 
Glow 对象的外边界增加光效 

Grayscale 设置灰度(降低图片的色彩度) 
Invert 设置底片效果 

Light 设置灯光投影 
Mask 设置透明膜 

Shadow 设置阴影效果 
Wave 利用正弦波纹打乱图片 

Xray 只显示轮廓 

 

1、Alpha：设置透明层次

　　语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)" 

    该滤镜能够使对象呈现渐变半透明效果，其效果是由小括号中的各属性名及其对应的属性值决定。 
　　说明： 
　　Opacity： 代表透明度数，起始值，取值为0～100, 0为透明，100为不透明。 

　　FinishOpacity： 目标值， 用来设置结束时的透明度,以达到渐变效果. 是一个同Opacity一起使用的选择性的参数，当同时设定Opacity和FinishOpacity时，可以制作出透明渐进的效果；其属性值也是从0到100，0表是完全透明，100表示完全不透明。
　　Style： 是用来设置渐变风格的，当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用来指定渐进的显示形状，０代表均匀渐进；１代表线形渐进；２代表放射渐进；３代表直角渐进。（0是无变化,1是线行渐变,2是放射渐变,3是X型渐变）

　　StartX：任意值 ，是用来设置水平方向渐进的起始位置。
　　StartY：任意值 

    FinishX： 是用来设置水平方向渐进的结束位置。

    FinishY： 是用来设置竖直方向渐进的结束位置。

style="filter:alpha(opacity=40)"

 

2、blur：创建高速度移动效果，即模糊效果
　　语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)" 

    该滤镜能够使对象表现一种模糊的效果，其效果是由小括号中的各属性名及其对应的属性值决定。
　　说明： 
　　Add： 用来确定是否在运动模糊中使用原有目标，其属性值有０和１两种，０属性值意思是在模糊运动中不使用原有目标，大多数情况下适用于图象；１属性值代表在模糊运动中使用原有目标，大多数情况下适用于文本。
　　Direction：角度，0～315度，步长为45度。 用来表示模糊移动时的角度，其属性值为０到３６０度。 
　　Strength：效果增长的数值，一般5即可。 用来表示模糊移动时的距离，该属性值一般可以任意设置。

style="filter:Blur(Add="1",Direction="60",Strength="15")"

 

 

3、Chroma：制作专用颜色透明
　　语法：STYLE="filter:Chroma(Color = color)" 

    该滤镜能够使图像中的某一颜色变成透明色。
　　说明：

    color：#rrggbb格式，任意。可设置对象中的某种颜色为透明色，在标记符中将该属性应用于对象时，则对象内容中的指定颜色就变为透明的，即不可见了。通过该属性值的设定，我们可以来过滤某图象中的指定颜色。

 

4、DropShadow：创建对象的固定影子 
　　语法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)" 

    该滤镜主要是用来产生重叠效果的，其效果是由小括号中的各属性名及其对应的属性值来产生的。 
　　说明：

    Color: #rrggbb格式，任意。 是用来设置投影文字的颜色。
　　Offx： X轴偏离值，代表投影文字与原文字之间水平方向上的偏移量。
　　Offy： Y轴偏离值，代表投影文字与原文字之间垂直方向上的偏移量。 
　　Positive： 是一个布尔值（０或者１），如果为"TRUE（非0）"，那么就为任何的非透明像素建立可见的投影；如果为"FASLE（0）"，那么就为透明的像素部分建立透明效果。  

 

5、FlipH、FlipV：创建水平镜像图片
　 语法：STYLE="filter:FlipH"   沿水平方向翻转对象

         STYLE="filter:FlipV"   沿垂直方向翻转对象

   该滤镜能够使ＨＴＭＬ对象进行左右、上下对换，一般适用于图象对象。

 style="filter: FlipH; FlipV"

6、glow：加光辉在附近对象的边外

　　语法：STYLE="filter:Glow(Color=color, Strength=strength)" 

    该滤镜能够在原对象周围产生一种类似发光的效果，其具体效果是由小括号中的各属性名及其对应的属性值来产生的。 
　　说明： 
　　Color：发光的颜色。 
　　Strength：发光强度的表现，也指光晕的厚度；其大小可以从1到255之间的任何整数来指定这个强度。

 style="filter:Glow(Color= #00FF00, Strength=3)"

7、gray：把图片灰度化 

　　语法：STYLE="filter:Gray"  

   将对象以灰度处理（变灰）

    【原图像】

【灰度处理】

style="filter:Gray"

8、invert：反色 
　　语法：STYLE="filter:Invert"  

    逆转对象颜色 
 

【反色】

style="filter:Invert"

 

9、Light：设置灯光投影
    语法：Filter{light}

     对对象进行模拟光照 
    这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性，那么就可以调用它的“方法(Method)"来设置或者改变属性。

   “LIGHT"可用的方法有：
    AddAmbient 加入包围的光源 
    AddCone 加入锥形光源 
    AddPoint 加入点光源 
    Changcolor 改变光的颜色 
    Changstrength 改变光源的强度 
    Clear 清除所有的光源 
    MoveLight 移动光源 
    可以定义光源的虚拟位置，以及通过调整X轴和Y轴的数值来控制光源焦点的位置，还可以调整光源的形式 
（点光源或者锥形光源）指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源，可能会
产生一些意想不到的效果。

 

10、mask：创建透明掩膜在对象上 
　　语法：STYLE="filter:Mask(Color=color)" 

    对对象生成掩膜

 

11、shadow：创建偏移固定影子
　　语法：filter:Shadow(Color=color, Direction=direction) 

    沿对象边缘产生阴影 
　　说明： 
　　Color：#rrggbb格式。用于设定阴影颜色 。

　　Direction：角度，0－315度，步长为45度。用于设定投影方向。

style="filter:Shadow(Color= #FFFF00, Direction=90)"

 

12、wave：波纹效果 
　　语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength) 

    该滤镜能够使被过滤对象在垂直方向上生成正弦波形，从而能造成一种变形幻觉，其具体效果是由小括号中的各属性名及其对应的属性值来产生的，一般适用于图象对象。 
　　说明： 
　　Add：一般为1，或0。布尔值，它用来决定是否将原始图象加入最后的效果之中。  

　　Freq：变形值。 指波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹。 
　　LightStrength：变形百分比。 可以对于波纹增强光影的效果，其取值范围为从0到100。
　　Phase：角度变形百分比。用来设置正弦波的偏移量，也就是决定波形的形状，其属性值的取值范围为从０到３６０度。  

　　Strength：变形强度。 用来决定波形振幅的大小。   

 【波纹】

style="filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")"

13、Xray：使对象变得像被x光照射一样 
　　语法：STYLE="filter:Xray"

    改变对象颜色深度，并绘制黑白图象

    style="filter:Xray"

14.颜色变化 
    语法：filter: progid:DXImageTransform.Microsoft.Gradient(Enable=true,GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

    说明：

progid:DXImageTransform.Microsoft.Gradient：滤镜名称，通过这句话可以知道本处使用Gradient滤镜。

Enabled：设置或检索滤镜是否激活，设置true false,默认为激活，可以设置false禁止滤镜。   

 progid：DximageTransform.Microsoft.Gradient：背景渐变。

GradientType:设置或检索色彩渐变的方向。1代表水平渐变，0代表垂直渐变。默认值为1。

startColorStr:设置色彩渐变的开始颜色和透明度。默认值为#FF000000 （不透明黑色）。其格式为#AARRGGBB 。 AA 指定透明度。（ 00 是完全透明， FF 是完全不透明。） RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值。超出取值范围的值将被恢复为默认值。 

EndColorStr:设置色彩渐变的结束颜色和透明度。默认值为#FF000000 （不透明黑色）。其格式为#AARRGGBB 。 AA 指定透明度。（ 00 是完全透明， FF 是完全不透明。） RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值。超出取值范围的值将被恢复为默认值。

 

style="filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,

StartColorStr='#FF0000', EndColorStr='#FFFF00')"