滤镜起初是SVG规范的一部分。然而，当滤镜效果越来越明显时，W3C开始为CSS增加一些常用的滤镜效果。CSS过滤器是非常强大的，并且非常容易使用。可以来为图像或者其他添加模糊、灰度、亮度等效果。它们可以单独使用，也可以与其他滤镜组合使用，并遵循一下规则。

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

下面我们简单的过一遍这些滤镜。

亮度 Brightness

Brightness滤镜用于控制图片的亮度。参数接受的值为大于或等于0。0%则输出纯黑色。同样的，设置100%的话就为图像原本的亮度。也可以设置大于100%的值，以此提升图像的亮度。设置300%就会将原来图像的亮度提升3倍。

img {
  filter: brightness(300%);
}

对比度 Contrast

Contrast滤镜用来控制图片的对比度。像亮度滤镜一样，参数接受的值为大于或等于0。该滤镜控制在CSS图像的深色和浅色部分之间的差异。因此，设置0%则是灰度图像。设置对比度为100％为原始图像，超出100%将进一步提高图像的对比度

img {
  filter: contrast(0%);
}

灰度 Grayscale

Grayscale滤镜用于控制图片的灰度。这个滤镜逐渐将我们的图像中的所有的颜色转换成一些灰色的阴影。 设置0％的值没有效果，100％的值会变成他们完全灰度。负值是不允许的。
看下面Demo

饱和度 Saturate

Saturate滤镜控制图像的色彩饱和度。 设置0％将彻底从图像中删除所有颜色，而超过100％的值将使图像饱和。设置100％时看起来就像原始图像。负值是不允许的。

img {
  filter: saturate(0%);
}

褐色Sepia

Sepia滤镜用于控制图片的褐色色调，也就是常见的将图片调为老照片效果。设置0%为原始图像，设置100%为老照片效果。

img {
  filter: sepia(100%);
}

色相旋转Hue-rotate

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

Hue-rotate滤镜适用于色相旋转到图像的所有颜色。
设置0deg时没有效果，取值没有最大值，取值超过360deg时就相当于一个循环，也就是取90deg的效果跟取450deg的效果是一样的。
看下面Demo

反色Invert

Invert滤镜反转所有颜色。反转的量取决于设置的值。设置0%的时候没有变换，设置100%的时候则反转所有颜色。

img {
  filter: invert(100%);
}

模糊Blur

Blur滤镜适用于高斯模糊的图像。把颜色混合在一起，并分布在的边缘上。传递给此过滤器的半径参数来确定屏幕上的交融互进多少像素。取值越大，模糊效果越明显。这个滤镜可以接受任何长度值，除了百分比。

img {
  filter: blur(1px);
}

透明度Opacity

opacity滤镜使图像变透明。取值0%时，完全透明，取值100%的时候完全不透明。这个滤镜跟已知的opacity属性相似。唯一的区别是性能。opacity滤镜属性在支持硬件加速的浏览器上性能会更好。

img {
  filter: opacity(75%);
}

阴影Drop Shadow

Drop Shadow滤镜增加了一个阴影效果。此属性需要X和Y的偏移，以及隐隐的颜色。也可以设置一个模糊半径。

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

Url()

虽然我们讨论过的所有的滤镜非常有用，他们其实是通用的滤镜，但是你的项目可能需要更多的效果，如果上面滤镜没有能满足你的要求的，你可以创建自己的SVG滤镜然后使用其id通过url()引用。

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="greenish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.1"/>
      <feFuncB type="linear" slope="2" intercept="-0.25"/>
    </feComponentTransfer>
  </filter>
  <filter id="bluish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.1"/>
      <feFuncB type="linear" slope="2" intercept="0"/>
    </feComponentTransfer>
  </filter>
</svg>

<style type="text/css">
img {
  filter: url('#greenish');
}
</style>

组合滤镜和动画滤镜(Combining and Animating Filters)

您也可以组合多个滤镜来获得各种效果。在大多数情况下，滤镜的顺序并没有多大关系。但是如果在灰度滤镜后再加上一个褐色滤镜，还是会显示一个灰度图像。

滤镜也可以有动画效果。看看下面的代码片段为例：

img {
  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  ....
  96% {
    filter: brightness(400%);
  }
}

附加说明

即使滤镜作用在元素的盒模型外面，它将不会对元素盒模型的几何机构产生影响。记住，滤镜会影响目标元素的所有部分，包括背景(backgrounds)，边框(borders)，和文本装饰(text-decoration)。滤镜也可以应用到视频和iframes。看下面Demo

如果你的浏览器不使用硬件加速，所有这些滤镜的性能都是非常好的，除了模糊滤镜可能会很慢。url()滤镜的性能取决于你应用的SVG滤镜。
所有主流浏览器都支持filter属性。Chrome和Opera需要版本前缀。滤镜不支持IE，Edge支持部分。