滤镜原本是 SVG 规范中的一部分。然而，当滤镜的用途变得更广泛时，W3C 也开始给 css 增加了一些常用的滤镜效果。CSS 滤镜非常强大又好用，你可以用它来模糊，变亮或饱和度以调整图像。这些滤镜可以单独使用也可以和其它的滤镜组合使用，滤镜的 CSS 语法是这样的：

filter: <filter-function> [<filter-function>]* | none

现在开始，我将对这些滤镜做一下简要的介绍。

亮度:

该滤镜控制图像的亮度。它可以接受大于或等于零的值作为它的参数。值为 0％ 时将变成黑色。值为 100％ 时则是原始图像。你可以指定大于 100％ 的值以得到更明亮的图像。比如设为 300％ 的值将使图像变成 3 倍亮：

img {     filter: brightness(300%); }

对比度

该滤镜控制图像的对比度。同上，它也可以接受大于或等于零的值。该滤镜控制 CSS 里图像的深色和浅色部分之间的差异。因此，值为 0％ 时的结果是得到一个灰色图像。对比度值为 100％ 则是原始图像，超过此值之后将进一步提高图像的对比度：

img { filter: contrast(0%); }

灰度

从名称上可以明显看出，该滤镜可以使你的图像变灰（黑白化）。该滤镜把所有图像的颜色转换为灰阶值。值为 0％ 时对我们的图像没有影响，值为 100％ 时会变成他们完全变成黑白，该值不允许为负。

img { filter: grayscale(100%); }

饱和度

该滤镜控制图像的饱和度。值为 0％ 时将彻底从图像中删除掉所有颜色，而当值超过 100％ 时将使图像饱和度增加。值为 100％ 时则是原始图像，该值不允许为负。

img { filter: saturate(0%); }

棕褐色化

这个滤镜会像一些老照片风格那样给图像加上深褐色色调。加入深褐色的量取决于百分比的值。值为 0％ 时则是原始图像，并当值为 100％ 时，图像将完全褐色。

img { filter: sepia(100%); }

色调对调

这个滤镜会把图像的所有颜色的色调对调。在该颜色对调的程度取决于指定的参数的值。当值为 0 度时，图像保持不变。虽然该滤镜没有最大值，但是，超过 360 deg 以上的值的效果会循环。也就是说，90 deg 和 450 deg 这两个值将具有相同的效果。

img { filter: hue-rotate(90deg);

反色

这个滤镜会把图像的所有颜色反色。反色的量取决于参数的值。值为 0％ 时不会对原始图像有任何影响，当值为 100％ 时将完全反色。

img { filter: invert(100%); }

模糊

该滤镜适用于高斯模糊图像。它把每个像素的颜色涂抹在一起，并散布到邻近的边缘外围。该滤镜设置的半径参数会确定屏幕上多少的像素会连成一片，越大的值将越模糊。这个滤镜可以接受除了百分比值外的任何长度值。

img { filter: blur(1px); }

不透明度

该滤镜会将使你的图像半透明化。图像将在值为 0％ 的时候完全透明，当值为 100％ 则保持原样。该滤镜是类似于通常的 opacity 属性。这两者之间的区别只是在性能上略有差异，该滤镜在某些支持硬件加速的浏览器上会有更好的性能。

img { filter: opacity(75%); }

阴影

顾名思义，这个滤镜给图像增加了阴影效果。它基本上是一种对输入图像的 alpha 遮罩的模糊，偏移量是你指定的颜色。此属性需要 x 轴和 y 轴偏移值，以及阴影的颜色值。你也可以设置一个模糊半径值，这会决定阴影是尖锐还是模糊。

img { filter: drop-shadow(5px 5px 10px #666); }

Url()

虽然上述这些滤镜非常有用，但它们都是通用的，你的项目上可能需要更多自定义化效果。如果上述的滤镜没有满足你的需求，你可以创建自己的 SVG 滤镜并通过其 id 使用 url() 来引用这个滤镜。

1.   <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> 
2. <filter id="greenish"> 
3.   <feComponentTransfer> 
4.     <feFuncR type="linear" slope="2" intercept="-0.5"/> 
5.     <feFuncG type="linear" slope="2" intercept="-0."/> 
6.     <feFuncB type="linear" slope="2" intercept="-0.25"/> 
7.   </feComponentTransfer> 
8. </filter> 
9. <filter id="bluish"> 
10.   <feComponentTransfer> 
11.     <feFuncR type="linear" slope="2" intercept="-0.5"/> 
12.     <feFuncG type="linear" slope="2" intercept="-0.1"/> 
13.     <feFuncB type="linear" slope="2" intercept="0"/> 
14.   </feComponentTransfer> 
15. </filter> 
16.   </svg> 
17.  
18. <style type="text/css"> 
19.   img { 
20. filter: url('#greenish'); 
21.   } 
22.   </style> 

组合和动画滤镜

你也把可以多个滤镜组合在一起来创造各种效果。多数情况下，滤镜的顺序并没有多大关系，但是有的滤镜会根据在它们在你的 CSS 顺序会被其他一些滤镜将覆盖。例如，使用一个灰度滤镜后再使用深褐色滤镜最后只会出现一个棕色图像，如果顺序反过来的话会得到的一个灰度化的图像。

滤镜也可变成动画。通过正确的设置动画，你可以创建一些非常有趣的动画效果。以此为例：

1. img { 
2. animation: haunted 3s infinite; 
3.   } 
4.  
5.   @keyframes haunted { 
6. 0% { 
7.   filter: brightness(20%); 
8. } 
9. 48% { 
10.   filter: brightness(20%); 
11. } 
12. 50% { 
13.   filter: sepia(1) contrast(2) brightness(200%); 
14. } 
15. .... 
16. 96% { 
17.   filter: brightness(400%); 
18. } 
19.   } 

在上面的代码中，具有不同值的多个滤镜会在动画的过程中生效。

补充:

虽然滤镜会在一个元素的盒模型外描绘，但对该元素的盒子模型的几何结构没有影响。要记住滤镜会影响目标元素的一切，包括：背景，边框和文字修饰。你也可以在视频和内联框架中也使用滤镜。下面的演示说明了这个概念。更多的例子可在 Bennett Feely’s 的网站查看。

iframe

所有这些滤镜都非常伟大且性能很好，除了模糊滤镜之外，如果你的浏览器不支持硬件加速的话可能会有些慢。url() 滤镜的性能会根据你使用哪些 SVG 滤镜而决定。

filter 属性被所有主流浏览器支持。Chrome 和 Opera 需要这个属性的前缀版本一起使用。滤镜不支持 IE，不过 Edge 可以部分支持，也就是除了 url() 之外都支持。

结语

本贴给开发者探索了许多 CSS 滤镜功能。它们有很好的浏览器支持性，易于使用且比 canvas 的方案有更好的性能。此外，正如我在上面提到的，你也可以在视频以及与其他元素中使用。

如果你还有更绝妙的利用滤镜的方法，请给我留个言，或者提出你的疑问。

Tags: 滤镜 灰度 亮度

分享到：