css中的滤镜

前几天在作一个app应用的时候，用到了滤镜。在以前我只是知道有这么个东西，可是具体的知识点其实我是不太清楚的，因此为了让本身能深入记忆，专门把它来记录一下。。

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

2、支持度：

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

滤镜效果 描述 ：

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

3、滤镜的各类属性（重点）详解：

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);    数值越大，越模糊，

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

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

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

四、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)"

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

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

六、Glow    为对象的外边界增长光效 

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

参数：

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

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

七、Gray     gray滤镜并没有参数 ,Invert,Xray 滤镜

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

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

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

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

八、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 有相同的效果，只不过一个有参数设置，一个没有参数设置。　　

九、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)"　　　　　

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

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

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

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

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

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

参数：Color：#rrggbb格式。

 

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

 

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

十二、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")；

1三、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);　

1四、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);

1六、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);

1七、contrast   对比度

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

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