css中的滤镜

前几天在做一个app应用的时候，用到了滤镜。在之前我只是知道有这么个东西，但是具体的知识点其实我是不太清楚的，所以为了让自己能深刻记忆，专门把它来记录一下。。

一、滤镜的标识符：“filter”;语法：style="filter:滤镜属性：（参数）"

二、支持度：

IE4.0以上支持的滤镜属性表

滤镜效果 描述 ：

　　　　　　Alpha 设置透明度 
　　　　　　Blur 建立模糊效果 
　　　　　　Chroma 把指定的颜色设置为透明 
　　　　　　DropShadow 建立一种偏移的影象轮廓，即投射阴影 
　　　　　　FlipH 水平反转 
　　　　　　FlipV 垂直反转 
　　　　　　Glow 为对象的外边界增加光效 
　　　　　　Grayscale 降低图片的彩色度 
　　　　　　Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 
　　　　　　Light 在一个对象上进行灯光投影 
　　　　　　Mask 为一个对象建立透明膜 
　　　　　　Shadow 建立一个对象的固体轮廓，即阴影效果 
　　　　　　Wave 在X轴和Y轴方向利用正弦波纹打乱图片 
　　　　　　Xray 只显示对象的轮廓

三、滤镜的各种属性（重点）详解：

1.alpha  滤镜用于设置透明度

法：filter:alpha(enabled=bEnabled,opacity=iOpcity,finishOpacity=iFinishOpacity,style=iStyle,startX=iPercent,startY=iPercent,finishX=iPercent,finishY=iPercent)

参数很多，但是有些参数是可选参数，不一定全部参数都要用上哦。

enabled 布尔值：true |false
（可选参数）      true：默认值，滤镜激活
                       flase：滤镜被禁止

opacity 代表透明度程度：范围是从0~100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明；

finishOpacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100;

style 指定了透明区域的形状特征。
　　　　0代表统一形状
　　　　1代表线形
　　　　2代表放射状
　　　　3代表长方形;

startX   代表渐变透明效果的开始的X坐标；

startY    代表渐变透明效果的开始的Y坐标；

finishX   代表渐变透明效果结束的X坐标；

finishY   代表渐变透明效果结束的Y坐标；

实例：style="filter:alpha(opacity=10,style=3);"

前面是IE下的，后面的透明度设置是在大众浏览器下支持的，在写代码的时候建议最好两个都写上，当一个属性没有作用时，另一个属性调用也是好的。

2.Blur 模糊效果 。

语法：filter:blur(add=iadd,direction=idirection,strength=istrength)；

参数：

add      它指定图片是否被改变成模糊效果，模糊效果是按顺时针的方向进行的。
           这是一个布尔值：true（默认）或false，也可以是1和0，1表示“是”，0表示“否”。add=false(或“0”)时Blur滤镜不起作用，取true（或非“0”值）时Blur滤镜起作用；

direction     用来设置模糊的方向，其值为0至360度；其中0度代表垂直 向上，然后每45度为一个单位。它的默认值是向左的270度。

strength     它代表有多少个像素的宽度成为阴影，也可以简单地理解为阴影的长度。它只能用整数来指定，默认值是5个像素，可以根据实际需要来指定阴影的长度。

实例：filter: blur(1px);-webkit-filter: blur(1px);-moz-filter: blur(1px);-o-filter: blur(1px);-ms-filter: blur(1px);    数值越大，越模糊，

3、Chroma  滤镜给予图像一个特定的颜色透明；

语法："filter:Chroma(Color=color)"；

实例：style= "filter:chroma(color=#ceff9c)"；

4、DropShadow   添加对象的阴影效果。其工作原理是建立一个偏移量，加上较深。
语法：style= "filter:dropshadow(color=pink,offx=-5,offy=-5,positive=1)"

参数：

'Positive '    参数是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。

　　　　　　　　　　　　　 如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果 代码如下：

offx：        阴影相对于原始对象的水平位移量，设置值为整数，单位为像素。若水平往右移，则正数；反之为负数

offy：        阴影相对于原始对象的垂直位移量，设置值为整数，单位为像素。若垂直往下移，则正数；反之为负数；

/**  注意：
     *     1. 阴影的外观受border-radius样式的影响；
     *     2. :after和:before等伪元素会继承阴影的效果。
     */

实例：style="filter:dropshadow(color=gray,offx=5,offy=5.positive=0)"

5、FlipH 水平反转 ，FlipV 垂直反转

语法:filter:fliph()              filter:filhv()

6、Glow    为对象的外边界增加光效 

语法：{filter:glow(color=color,strength)};

参数：

color：设置边缘光晕的颜色，以#rrggbb的格式，或名称；
strength：设置边缘光晕的强度大小，设置值为1~255的整数；

实例：style= "filter:glow(color=yellow,strength=10)"　　

7、Gray     gray滤镜并无参数 ,Invert,Xray 滤镜

语法：style="filter:gray";   /*IE5--9*/   style="filter:invert";    style="filter:xray";

Gray滤镜是把一张图片变成灰度（黑白）图；（汶川大地震后很多网站色调都变灰色，就是用的这一点代码实现的）;

Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值,类似于底片效果，invert滤镜并无参数,我称它为：反色调;

Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片，Xray 只显示对象的轮廓。

8、Grayscale 降低图片的彩色度

语法：style="filter:grayscale();";

/*灰度  取值在0-1之间   可以取值百分数或者分数*/

实例：style="filter: grayscale(1);
            -webkit-filter: grayscale(1);
            -moz-filter: grayscale(1);
            -o-filter: grayscale(1);
            -ms-filter: grayscale(1);"

个人认为：   Grayscale 和gray 有相同的效果，只不过一个有参数设置，一个没有参数设置。　　

9、Light 在一个对象上进行灯光投影，它可控制多个光源照向一个对象，用以调节亮度、颜色，语法；

语法：Filter{light}

这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT'滤镜属性，那么就可以调用它的“方法(Method)'来设置或者改变属性。“LIGHT'可用的方法有：
·AddAmbient 加入包围的光源 
·AddCone 加入锥形光源 
·AddPoint 加入点光源 
·Changcolor 改变光的颜色 
·Changstrength 改变光源的强度 
·Clear 清除所有的光源 
·MoveLight 移动光源
方法详解：
（1）addAmbient (iRed,iGreen,iBlue,iStrength) : 为滤镜添加环境光。环境光是无方向的，并且均匀的洒在页面的表面。环境光有颜色和强度值，可以为对象田家更多的颜色。它通常和其他光一起使用。无返回值。
iRed : 必选项。整数值(Integer)。 指定红色值。取值范围为 0 - 255 。 
iGreen : 必选项。整数值(Integer)。 指定绿色值。取值范围为 0 - 255 。 
iBlue : 必选项。整数值(Integer)。 指定蓝色值。取值范围为 0 - 255 。 
iStrength : 必选项。整数值(Integer)。 指定光强度。取值范围为 0 - 100 。

（2）changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute) : 改变光的颜色。无返回值。
iLightNumber : 必选项。整数值(Integer)。 指定光的标识符。 
iRed : 必选项。整数值(Integer)。指定红色值。取值范围为 0 - 255 。 
iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为 0 - 255 。 
iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为 0 - 255 。 
fAbsolute : 必选项。布尔值(Boolean)。指定改变是替换当前设置的绝对值，还是加到当前设置的相对值。此参数不等于零表示采用绝对值。否则表示采用相对值。

可以定义光源的虚拟位置，以及通过调整X轴和Y轴的数值来控制光源焦点的位置，还可以调整光源的形式（点光源或者锥形光源）指定光源是否模糊边界、光源的颜色、亮度等属

性。如果动态的设置光源，可能回产生一些意想不到的效果。

(未测试0)
style="filter:light(); width:400; height:300" onload="javascript:this.filters.light.addAmbient(10,250,100,55)"

onmousemove="javascript:this.filters.light.changeColor(0,150,100,50,0)"　　　　　

0、Mask 为一个对象建立透明膜，掩饰，假面具，设置对象的屏蔽效果，就好象印章一样印出模型的模样；

　　　　　使用'MASK'属性可以为对象建立一个覆盖于表面的膜，其效果就象戴着有色眼镜看物体一样。

语法：STYLE="filter:Mask(Color=color)"；

实例：style= "filter: mask(color=‘#0000ff’)"；

11、Shadow 建立一个对象的固体轮廓，即阴影效果 ；阴影渐变 除了具备DropShadow的阴影效果外，它还多了阴影渐变的特效；

语法：filter:Shadow(Color=color,Direction=direction)

参数：Color：#rrggbb格式。

 

Direction：用于设定动态模糊效果的方向，总单位为360°，0代表垂直向上，并以每45°为一个单位，默认为225度；

 

例子：filter:Shadow(Color="#6699CC",Direction="135")；　　

12、Wave 在X轴和Y轴方向利用正弦波纹打乱图片 
　　语法：filter:Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)

说明：

Add：一般为1，或0。

Freq：变形值。

LightStrength：变形百分比。

Phase：角度变形百分比。

Strength：变形强度。

例子：filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")；

13、saturate   饱和度

语法：style="filter:saturate();"

实例：

　　/** 
     *  效果范围，取值范围>=0的数字或百分数，1为无效果，0为灰度图
     */
     -webkit-filter: saturate(2);
     -moz-filter: saturate(2);
     -o-filter: saturate(2);
     -ms-filter: saturate(2);
     filter: saturate(2);　

14、Hue Rotate     色相旋转滤镜　/*反色调  取值为0-360deg*/　

语法：　style="filter: hue-rotate();"　;

实例：

/**  格式，filer: hue-rotate(效果范围)
     *  效果范围，取值范0deg~365deg，0（默认值）为无效果
     */
     -webkit-filter: hue-rotate(200deg);
     -moz-filter: hue-rotate(200deg);
     -o-filter: hue-rotate(200deg);
     -ms-filter: hue-rotate(200deg);
     filter: hue-rotate(200deg);

15：sepia      滤镜是对图片或元素整体进行棕褐色处理，就是老照片那种效果。

语法：　style="filter: hue-rotate();"　;

实例：

　　　　/*老照片效果  取值0-1之间*/

　　　　filter: sepia(0.5);
           -webkit-filter: sepia(0.5);
           -moz-filter: sepia(0.5);
           -o-filter: sepia(0.5);
           -ms-filter: sepia(0.5);

16、brightness   亮度

语法：　style="filter: brightness();"　;

实例：

/**  格式，filer: brightness(效果范围)
     *  效果范围，取值范围>=0的数字或百分数，1为无效果
     */
     -webkit-filter: brightness(2);
     -moz-filter: brightness(2);
     -o-filter: brightness(2);
     -ms-filter: brightness(2);
     filter: brightness(2);

17、contrast   对比度

/**  格式，filer: contrast(效果范围)
     *  效果范围，取值范围>=0的数字或百分数，1为无效果
     */
     -webkit-filter: contrast(2);
     -moz-filter: contrast(2);
     -o-filter: contrast(2);
     -ms-filter: contrast(2);
     filter: contrast(2);

前面的 内容有些我没有经过测试，不过后面的饱和度，对比度亮度什么的，我都有进行测试哦。。。