深入理解CSS3滤镜（filter）功能和实例详解

CSS3滤镜功能源自SVG滤镜规范，SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。

把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果（模糊、变形、色度等），这赋予开发者更多创意表达的空间。

为止SVG和CSS工作组联合起来制定一个协调统一的滤镜规范：https://drafts.fxtf.org/filters/

该规范目前尚处于编辑者草稿阶段（Editor's Draft），还在不断实验和发展中，但以Chrome和FF为代表的现代浏览器已经提供了支持。

本文简单介绍CSS3中常用滤镜效果的工作方式。

使用语法

filter被作为一个新的属性引入CSS3，语法示例如下：

div { filter: grayscale(100%); }

这里我们忽略浏览器前缀。

工作原理

HTML元素绘制到页面的过程分为两步，第一步是绘制当前元素及其子元素到一个缓存中，然后和其父元素组合并最终绘制到屏幕。

滤镜效果发生在“组合”这一步之前，也就是对缓存中的数据进行处理后再和父元素组合（Composite），这个数据处理过程和像素图的处理方式类似，对原图做一个通过CSS3 filter属性指定的图像算法运算得到一个新图，然后两者复合而成，就好比在相机镜头前加了一个过滤镜片一样。

SVG和CSS滤镜

CSS3中可以直接使用SVG的滤镜，SVG中的filer是通过xml语法来定义，这样结合起来使用固然可以复用SVG已有滤镜的强大功能，但写起来比较复杂，因此CSS3中新定义了一些内置的常用滤镜，使用起来要容易得多。这里将只讨论后者。

1.灰度滤镜

img{ filter: grayscale(100%); }

你可以修改上面代码中的灰度比例值，来观察效果的变换。

2.发黄滤镜

img{ filter: sepia(100%); }

这个滤镜接受百分比参数，可以用来制作老照片特效。

3.饱和度滤镜

img{ filter: saturate(10); }

这个滤镜用来改变图片的饱和度，使得图片更加醒目刺眼（与之相反的是色彩柔和度）。一般用于海报制作突出重点部分。

4.色轮滤镜

img{ filter: hue-rotate(50deg); }

这个滤镜利用色轮（color-wheel）来转换颜色，比如50deg表示图像的颜色转换为在色轮上旋转50度后的颜色值。

5.反转滤镜

img{ filter: invert(100%); }

该滤镜用来反转当前颜色，可以接受百分比参数。和PS中的反转效果类似。

6.透明度滤镜

img{ filter: opacity(50%); }

该滤镜用来改变图像的透明度。可以接受百分比参数。

7.亮度滤镜

img{ filter: brightness(50%); }

该滤镜可用来模拟环境光照效果，比如聚光特效或暗夜特效。

8.对比度滤镜

img{ filter: contrast(20%); }

该滤镜用来加强或减弱颜色对比度（即最亮颜色和最暗颜色之间的差异，100%表示和原图一样）。

9.模糊滤镜

img{ filter: blur(10px); }

该滤镜用来获取图像模糊特效，接受模糊半径（尺寸单位）参数。视觉上类似相机镜头失焦一样，其工作方式是把像素周边一定区域（由模糊半径参数所确定）的像素颜色进行混合，从而达到失去焦点的效果。

10.投影滤镜

img{ filter: drop-shadow(3px 3px 5px black); }

该滤镜用来获取图像外部的模糊阴影效果，和blur不同是，blur应用于图像本身，而drop-shadow是图像外部投影。

其工作方式是获取原图像的一个快照，然后使用指定颜色替换，再加上blur（模糊）效果，最后偏移指定位置后和原图复合。

该滤镜方法接受的参数为2到3个长度单位，比如上面代码中前面2个3px单位分别表示右阴影和下阴影长度，第3个参数5px表示模糊半径，最后的颜色参数表示阴影颜色。

性能考量

对于桌面系统而言，因为浏览器计算能力足够强大，一般不需要考虑性能，但是对于手机设备，需要小心应对和测试，尤其是blur效果（包括drop-shadow，因其内置blur操作），应该尽量减少blur半径，在效果和性能之间取得平衡。

关于在CSS3滤镜中直接用url引用SVG滤镜，可以在本站动效资源中搜索“SVG滤镜”，有很多果冻（粘稠液体）特效是用这种方法来制作的。