css3中filter俗称滤镜效果。它可以调整元素的色调（灰化、亮化、对比度、饱和度）、也能使元素产生模糊和反相的等效果。通常，我们使用filter的各种功能函数来处理图片，如果你将它应用于html页面，也会获得不一般的效果。这个特性支持最新版的chrome和firefox，接下来，我们来介绍filter下的八种功能：

hue-rotate 色调

hue-rotate 色调 -webkit-filter: hue-rotate(50deg); 取值为 0 – 360（可为负数），默认值为0，即没有任何效果。当值大于360，或者小于0时，会重复 0 – 360所产生的效果，即如同transform 中 rotate的取值效果。

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

50deg

blur 模糊

取值为 0 – 某个数值，默认值为0，不模糊。随着模糊半径的增大，而逐渐模糊

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

1px

grayscale 灰化

取值为 0 – 100%，默认值为0。将图片灰化

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

70%

sepia 怀旧

取值为 0 – 100%，默认值为0 。使图片带有旧旧的（淡黄色）感觉

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

60%

brightness 亮度

取值为 0 – 100% ，默认值为100%，即没有对图片做任何处理，当为0时，则整个图片变为黑色。在此之前，要实现图片半透明，通常的做法是在图片上覆盖一个半透明的层！现在却可以轻而易的实现：

-webkit-filter: brightness(50%);
filter: brightness(50%);

50%

contrast 对比度

取值为0 – 某个百分比，默认值为100%，即没有对图片做任何处理。值得注意的是，contrast的值不仅可以是百分之，也可以是非负整数，其中取值为1图像无任何变化。据测试，百分比到500%左右就没有什么太大变化了

-webkit-filter: contrast(300%);
filter: contrast(300%); 
// 或者 
-webkit-filter: contrast(3);
filter: contrast(3);

3

saturate 饱和度

取值为 0 – 100% ，默认值为100%，即没有对图片做任何处理

-webkit-filter: saturate(30%);
filter: saturate(30%);

30%

invert 反相

取值为 0 – 100% ，默认值为0，即图片无任何效果。值为50%时，图片为纯灰色。当大于50%时，则图片的色调逐渐过度到反色

-webkit-filter: invert(70%);
filter: invert(70%);

70%