简介
滤镜是一款强大的工具，网页制作者可以使用它来实现有趣的视觉效果。在本文中，我们将介绍滤镜效果的历史、用途及使用方法。我们将通过一些示例介绍为 CSS 定义的所有预定义过滤器。我们还将介绍在桌面设备和移动设备上使用过滤器时的性能注意事项，因为了解过滤器对速度的影响对于提供良好的用户体验非常重要。最后，我们将回顾一下现代浏览器中的实施现状。
滤镜效果的过去、现在和未来
滤镜效果源自可缩放矢量图形 (SVG) 规范。创建它们的目的在于将多种基于像素的图像效果应用到矢量图中。随着时间的推移，随着浏览器供应商将 SVG 功能添加到他们的浏览器中，滤镜的实用性也变得显而易见。来自 Mozilla 公司的 Robert O’Callahan 提出了一个绝妙的想法：通过将 CSS 应用于“常规”HTML 内容来使用 SVG 过滤器。Robert 制作了一个早期版本的原型，展示了滤镜和 CSS 样式组合的强大功能。W3C 的 CSS 和 SVG 工作组决定通过 CSS 样式统一对 HTML 和 SVG 的过滤器使用，从而为 CSS 推出了“filter”属性。目前，CSS 和 SVG 的工作人员共同致力于开展大量工作，让滤镜普遍适用。您可以在此处找到上述所有内容的现行规范。
“filter”CSS 属性焕然一新
Deja Vu 有时会遇到 Web 开发者遇到的 CSS 样式中的“filter”。这是由于旧版 Internet Explorer 具有通过 CSS 公开的“filter”属性来执行某些平台特有的功能。此属性已被弃用，取而代之的是标准的“filter”属性，此属性现在是 CSS3 的一部分。所以，当您在一些旧网页上发现“过滤”选项时，您完全不必对此感到困惑。新的“filter”属性包含所有操作，新版 IE 的实现方式与所有现代浏览器完全相同。
过滤条件的工作原理
那么，过滤器到底有什么作用呢？您可以将过滤器视为一种后期处理步骤，在布局并绘制完所有网页内容后，执行一些非常神奇的操作。
当浏览器加载网页时，它需要应用样式、执行布局，然后呈现网页，以便显示内容。完成所有这些步骤之后、在网页被复制到屏幕前，过滤器就会启动。它们会截取已渲染页面的快照作为位图图像，然后对快照中的像素执行一些神奇的图形，然后在原始页面图像的上方绘制结果。可以将这种滤镜想象成放置在相机镜头前面的滤镜。你通过镜头看到的是经滤镜效果修改的外界。
这当然意味着，在绘制带有过滤器的网页时会花费时间，但正确使用过滤器对网站速度的影响微乎其微。
此外，正如您可以在相机镜头上依次堆叠多个滤镜一样，您也可以逐一应用任意数量的滤镜来实现各种效果。
使用 SVG 和 CSS 定义的滤镜
由于滤镜最初来自 SVG，因此定义和使用滤镜的方式多种多样。SVG 本身就有一个 <filter> 元素，该元素使用 XML 语法封装了各种滤镜效果的定义。CSS 定义的过滤器集使用相同的图形模型，但它们的定义要简单得多，可以在样式表中使用。
大多数 CSS 滤镜都可以用 SVG 滤镜来表示，而且 CSS 还允许您根据需要引用在 SVG 中指定的滤镜。为了让网页作者能够更轻松地应用过滤器，CSS 过滤器设计人员付出了巨大的努力，因此本文仅介绍直接从 CSS 提供的过滤器，暂时忽略 SVG 定义。
如何应用 CSS 过滤条件
要通过 CSS 使用过滤器，只需对网页上的任何可见元素应用“filter”属性即可。举一个简单的例子，您可以这样写
div { { % mixin filter: grayscale(100%); % } }
这会导致页面上所有 <div> 元素的内容都变成灰色。非常适合将您的网页设为 20 世纪 40 年代的电视图片。
大多数过滤器都会采用某种形式的参数来控制过滤的程度。例如，如果你想将内容样式设为介于原始颜色和灰度版本中间的一半，则可以编写如下代码：
div { { % mixin filter: grayscale(50%); % } }
如果您想逐一应用多个不同的过滤器，非常简单，只需按如下方式在 CSS 中按顺序放置它们即可：
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
该示例将首先将所有原始颜色变成灰度模式，然后应用深褐色效果，最终结果将如下所示：
你可以灵活应用滤镜，从而实现各种效果 - 尽情发挥你的想象力，尝试创造出令人惊叹的效果吧！
使用 CSS 时可用的滤镜效果
因此，最初的 SVG 滤镜机制功能强大，但用起来却可能让人望而却步。正因如此，CSS 引入了大量标准滤镜效果，让您可以非常轻松地使用它们。
我们来分别了解一下它们及其用途。
- 灰度（数量）
- 这会将输入图片中的颜色转换为灰色色调。应用的“金额”用于控制应用多少灰色转化。如果值为 100%，则所有元素都会显示为灰色；如果值为 0%，则颜色保持不变。如果相比百分比，您更喜欢使用浮点数，即 0 等同于 0%，而 1.0 等同于 100%。
- 深褐色(amount)
- 这会使传递的颜色变得深褐色，就像在旧照片中一样。应用的“数量”与“灰度”滤镜的工作方式相同 - 即，100% 会使所有颜色完全变为深褐色色调，值越小，应用效果的比例就越小。
- saturate(金额)
- 这会对颜色应用色彩饱和度效果，使其看起来更鲜明。这是一种很酷的效果，可以让照片看起来像海报或卡通图片。借助此效果，您还可以使用大于 100% 的值来真正突出饱和度。这个特效看起来会显得相当古怪！
- hue-rotate(角度)
- 下面介绍的是颜色极客的效果，可用于实现有趣的结果。它的作用是改变颜色，使输入图像看起来完全不同。如果您可以想象一下，色轮周围的色谱从红色变为紫色，那么此效果会将色轮上的原始颜色作为输入，并通过“angle”参数对其进行旋转，从而生成旋转到的色轮上的颜色作为输出颜色值。因此，图片中的所有颜色在转盘上都会以相同的“角度”偏移。这当然是对其功能的简化，但希望其接近于合理。
- invert(数量)
- 这种效果会翻转颜色，这样一来，如果应用的“总量”达到 100%，输出的效果就会像是旧电影时代相机拍摄的负片效果！和之前一样，使用小于 100% 的值会逐步应用反转效果。
- 不透明度(amount)
- 如果您想让经过过滤的内容看起来是半透明的，这正是您的理想之选。“amount”值用于定义输出内容的不透明程度。因此，值 100% 是完全不透明的，因此输出与输入完全相同。当该值下降到低于 100% 时，输出图像的透明度会降低（更加透明），您看到的图像也会减少。当然，这意味着如果它与页面上的其他内容重叠，则其下的内容就会开始显示。“数量”为 0% 表示该区域将完全消失，不过请注意，您仍然可以让鼠标点击等事件发生在完全透明的对象上，因此，如果您想创建可点击区域而不显示任何内容，这非常方便。
这与您已经了解的“不透明度”属性相同。一般来说，CSS 的“opacity”属性没有经过硬件加速，但是一些使用硬件加速实现过滤器的浏览器会加速过滤器版本的不透明度，以获得更好的性能。
- 亮度（量）
- 这就像电视的亮度控制一样。它会按照“amount”参数成比例调整全黑和原始颜色之间的颜色。如果将此值设置为 0%，您将只能看到黑色，但当该值接近 100% 时，您看到越来越多的原始图片变亮，直到达到 100%，它与输入图片相同。你当然可以继续拍照片，因此设置 200% 之类的值会使照片的亮度是原始图片的两倍 - 非常适合在弱光环境下调整照片！
- 对比度
- 更多可通过电视控制的控件！这会调整输入图片中最暗部分和最亮部分之间的差异。如果您使用 0%，最终结果将变成黑色，就像使用“亮度”时一样，所以不太有趣。但是，当您将值增大到接近 100% 时，暗度差异会发生变化，直到达到 100%，它才重新成为原始图像。你也可以尝试超过 100% 的滤镜，让浅色和深色之间的差异更加明显。
- 模糊处理（半径）
- 如果您希望内容具有柔和的边缘，可以添加模糊效果。这种照片看起来像是曾经流行的电影制作技巧，采用经典的凡士林玻璃幕墙设计。它会将所有颜色涂抹在一起，并使其效果分散，就像您的眼睛失焦时一样。“radius”参数会影响屏幕上像素之间的融合程度，因此该值越大，模糊程度越高。当然，零会使图像保持不变。
- drop-shadow(shadow)
- 能够让内容看起来像是在阳光下，身后有阴影，这当然是太棒了，而“阴影”就是这个效果。它会拍摄图片快照，使其成为单色，对其进行模糊处理，然后稍微偏移结果，使其看起来像是原始内容的阴影。传入的“shadow”参数比单个值更复杂一些。它是一系列以空格分隔的值，还有一些值是可选的！“shadow”值用于控制阴影的放置位置、应用的模糊程度、阴影的颜色等。若要全面了解“shadow”值的用途，CSS3 背景规范详细说明了“box-shadow”。下面几个示例应该有助于您充分了解各种可能性。
这是另一个过滤器操作，它类似于通过“box-shadow”属性提供的现有 CSS 功能。使用过滤器方法意味着它可以被一些浏览器进行硬件加速，正如我们前面针对“不透明度”操作所描述的那样。
- 引用 SVG 滤镜的网址
- 由于滤镜源自 SVG，因此能够使用 SVG 滤镜设置内容的样式是合理的。使用当前的“过滤”房源提案可以轻松地做到这一点。SVG 中的所有滤镜都通过“id”属性进行定义，该属性可用于引用滤镜效果。因此，若要使用 CSS 中的任何 SVG 滤镜，您只需使用“url”语法引用相应滤镜即可。
例如，滤镜的 SVG 标记可能如下所示：
<filter id="foo">...</filter>
那么可以通过 CSS 执行一些简单操作，例如：
div { { % mixin filter: url(#foo); % } }
瞧！文档中的所有 <div> 都将根据 SVG 滤镜定义来设置样式。
- 自定义（即将推出）
- 自定义过滤条件即将推出。此类游戏可利用图形 GPU 的强大功能，使用一种特殊着色语言，实现你能想象出的神奇效果。关于“过滤器”规范的这部分内容仍在讨论和变化之中，但是一旦此功能在您使用的浏览器中推出，我们一定会撰写更多相关内容，说明其可能实现的功能。
性能考虑因素
每个 Web 开发者都会关心其网页或应用的性能。CSS 过滤器是一款功能强大的视觉效果工具，但同时可能会影响网站性能。
了解它们的用途以及这对性能的影响至关重要，尤其是当您希望网站在移动设备上支持 CSS 过滤器的情况下能良好地运行时。
首先，并非所有过滤器都具有相同的价值！事实上，大多数过滤器在任何平台上都能快速运行，对效果的影响微乎其微。不过，执行各种模糊处理的滤镜往往比其他滤镜慢。这当然意味着“模糊”和“阴影”。这并不意味着您不应该使用它们，但了解它们的工作原理可能会有所帮助。
当您执行 blur 时，它会混合输出像素周围像素的颜色，以生成模糊的结果。例如，如果您的 radius 参数为 2，则过滤器需要在每个输出像素周围的每个方向上检查 2 个像素，才能生成混合颜色。这适用于每个输出像素，这意味着当您增加 radius 时，大量计算只会变大。由于 blur 会观察每个方向，因此“radius”加倍意味着你需要查看 4 倍的像素数，实际上，radius 的每次加倍会减慢 4 倍。drop-shadow 过滤器包含 blur 作为其效果的一部分，因此当您更改 shadow 参数的 radius 和 spread 部分时，其行为也与 blur 类似。
使用 blur 时，并非完全可以做到这一点，因为在某些平台上可以使用 GPU 进行加速，但这不一定在所有浏览器中都可用。如不确定，最好的办法是尝试能为你带来所需效果的“半径”，然后尽量减小其值，同时仍保持可接受的视觉效果。以这种方式进行调整，可提高用户满意度，尤其是在他们通过电话使用您的网站时。
如果您使用基于 url 的滤镜来引用 SVG 滤镜，它们可以包含任何任意滤镜效果，因此请注意，它们也可能会很慢，因此请尽量确保您知道滤镜效果的效果，并在移动设备上进行实验，以确保效果没问题。
在现代浏览器中的可用性
目前，基于 WebKit 的浏览器和 Mozilla 提供了许多 CSS filter 效果。我们预计很快会在 Opera 和 IE10 中推出这些功能。由于该规范仍处于开发阶段，因此一些浏览器供应商已经使用供应商前缀实现了这项内容。因此，在 WebKit 中，您需要使用 -webkit-filter，而在 Mozilla 中，您需要使用 -moz-filter，并在出现其他浏览器实现时留意。
并非所有浏览器都能立即支持所有滤镜效果，因此您的实际效果会有所不同。目前，Mozilla 浏览器仅支持 filter: url() 函数（没有供应商前缀），因为该函数的实现先于其他效果函数。
我们总结了各种浏览器提供的 CSS 过滤器效果，并提供了有关在软件中实现这些效果的粗略性能指标。请注意，许多现代浏览器都开始在硬件（GPU 加速）中实现这些功能。如果这些模型支持 GPU 构建，那么运行速度较慢会显著提升性能。一如既往，在不同浏览器上进行测试是评估性能的最佳方式。
| 滤镜效果 | 浏览器支持 | 性能 |
|---|---|---|
| 灰阶图片 | Chrome | 非常快 |
| 怀旧效果 | Chrome | 非常快 |
| 饱和 | Chrome | 非常快 |
| 色调旋转 | Chrome | 快 |
| 倒置 | Chrome | 非常快 |
| opacity | Chrome | 可能比较慢 |
| 亮度 | Chrome | 快 |
| 对比度 | Chrome | 快 |
| 模糊 | Chrome | 很慢（除非加速） |
| drop-shadow | Chrome | 可能比较慢 |
| url() | Chrome、Mozilla | 视具体情况而定，由快到慢 |
其他实用资源
一款超棒的带有滤镜的互动式抽象绘画应用，可让您进行实验并分享自己的作品 请务必查看 Eric Bidelman 精彩的交互式滤镜页面 有关滤镜的精彩教程和示例 官方 W3C 滤镜效果 1.0 草稿规范http://dev.w3.org/fxtf/filters/ 示例使用滤镜创建的界面