CSS滤镜

说到滤镜，其实它并不是对图像进行了什么处理，而是在浏览器中对使用了该属性的对象进行一定的修饰。样式表滤镜实际上是样式表一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上，例如图片、文本、以及其他一些对象，为页面添加一些丰富的变化。如果大家有一些脚本语言的基础，能够把滤镜效果与类似javascript的脚本代码做一些结合，就可以拥有一个在样式表滤镜与脚本共同作用下建立的强大的动态交互文档工具。现在能使用的滤镜有13个之多，不过要欣赏到这些滤镜的特效，必须要求用户的浏览器必须在IE4.0/NC6.0之上，因为只有这些版本的浏览器才能支持样式表滤镜效果。

css滤镜

用过Photoshop的对滤镜肯定不陌生，在CSS3中，对各种滤镜效果已经有了支持，可以做出很多效果。
CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。
简而言之，就是在CSS中提供了一些已经预定义的属性或函数，实现图像的模糊、变色等效果。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。
紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 “filter” 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

CSS滤镜支持的方法（function）

• blur 模糊
• grayscale 灰度
• sepia 褐色
• saturate 饱和度
• hue-rotate 色相旋转
• invert 反色
• opacity 透明度
• brightness 亮度
• contrast 对比度
• drop-shadow 阴影

为了实现兼容性，当然少不了前缀-webkit-

   -webkit-filter : function (param)；

blur()模糊
给图像设置高斯模糊，值越大越模糊，如果没有设定值，那么默认为0，只能设备CSS的长度值，如px、rem等，不支持百分比。

   -webkit-filter : blur(5px);
   filter : blur(5px)

原图	滤镜

grayscale()灰度
设置图像的灰度，100%则为灰度图像，0%则图像无变化，值只能在0%-100%之间，默认为0。

   -webkit-filter : grayscale(100%);
   filter : grayscale(100%);

原图	滤镜

sepia()褐色
将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

   -webkit-filter : sepia(100%);
   filter : sepia(100%);

原图	滤镜

saturate()饱和度
转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

      **-webkit-filter : saturate(3);
       filter : saturate(3)**

原图	滤镜

hue-rotate() 色相旋转
图像色相旋转，参数为deg，值在0deg-360deg之间，超过360deg意味着旋转了一周，并无实际意义。

   -webkit-filter : hue-rotate(180deg);
   filter : hue-rotate(180deg)

原图	滤镜

invert() 反色
反转图像，值是转换的比例，值在0%-100%之间，100%则完全反转，0%则无变化，可以实现曝光的效果。

   -webkit-filter : invert(1);
   filter : invert(1);

原图	滤镜

opacity() 透明度
转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

   -webkit-filter :opacity(.5)
   filter : opacity(.5)

原图	滤镜

brightness()亮度
给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

   -webkit-filter : brightness(1.5)
   filter : brightness(1.5)

原图	滤镜

contrast()对比度
调整图片的对比度，0%时图像全黑，100%时图像不变，超过100%时指运用更低的对比，默认为1

   -webkit-filter : contrast(2)
   filter : contrast(2)

原图	滤镜

drop-shadow() 阴影
给图像设置一个阴影效果，和css中的box-shadow相似，不同的是，drop-shadow()中不可以指定inset，其余均相同。

   -webkit-filter : drop-shadow(15px 15px 10px #000);
   filter : drop-shadow(15px 15px 10px #000);

原图	滤镜

复合使用
你可以组合任意数量的函数来控制渲染，例如：

   filter: contrast(175%) brightness(30%);

原图	滤镜

   filter: drop-shadow(16px 16px 20px red) invert(75%);`

原图	滤镜

随着样式表技术的不断成熟，其滤镜功能和种类也在不断增多。如果用户能够熟练地混合使用它们，将可以产生意想不到的效果。在操作上，用户只需要了解具体滤镜的实际效果后，就能根据实际进行微调了。希望以上的内容对您有所帮助。