了解 CSS 过滤器效果

简介

滤镜是一款强大的工具，可供网站作者使用来实现有趣的视觉效果。本文将介绍滤镜效果的历史、作用以及使用方法。我们将通过一些示例介绍为 CSS 定义的所有预定义过滤器的示例。我们还将介绍在桌面设备和移动设备上使用过滤条件时的性能注意事项，因为了解过滤条件对速度的影响对于提供良好的用户体验至关重要。最后，我们将回顾现代浏览器中的实现现状。

滤镜效果的过去、现在和未来

滤镜效果起源于可缩放矢量图形 (SVG) 规范。它们的创建是为了将多种不同的基于像素的图片效果应用于矢量绘制。随着时间的推移，浏览器供应商在其浏览器中添加了 SVG 功能，过滤器的实用性变得显而易见。Mozilla 的 Robert O’Callahan 提出了一个绝妙的想法，即通过将 CSS 应用于“普通”HTML 内容来使用 SVG 滤镜。Robert 制作了一个早期版本的原型，展示了滤镜和 CSS 样式的强大组合效果。W3C 中的 CSS 和 SVG 工作组决定通过 CSS 样式统一 HTML 和 SVG 的滤镜使用方式，因此 CSS 的“filter”属性应运而生。目前，由 CSS 和 SVG 团队组成的联合工作组正在努力让滤镜能够广泛使用。您可以在此处找到所有这些内容的现行规范。

“filter”CSS 属性焕然一新

当 Web 开发者在 CSS 样式中看到“filter”时，有时会产生似曾相识的感觉。这是因为旧版 Internet Explorer 具有通过 CSS 公开的“filter”属性，以执行某些平台特有的功能。此属性已废弃，取而代之的是现在属于 CSS3 的标准“filter”属性。因此，当您在某些旧网页上看到“filter”时，不必感到困惑。所有操作都位于新的“filter”属性中，新版本的 IE 实现它的方式与所有现代浏览器一样。

过滤条件的工作原理

那么过滤器究竟有什么用？将过滤器视为最简单的方法就是执行后期处理，即在所有网页内容布局和绘制完成后，执行一些神奇的操作。

浏览器加载网页时，需要应用样式、执行布局，然后呈现网页，以便用户查看。过滤器会在完成所有这些步骤并在将网页复制到屏幕之前启用。它们的作用是截取以位图图像形式呈现的页面快照，然后对快照中的像素执行一些图形魔术，然后在原始页面图像的顶部绘制结果。您可以将其视为放置在摄像头镜头前面的滤镜。您通过镜头看到的，是经过滤镜效果修饰的外部世界。

当然，这意味着在绘制带有滤镜的网页时会耗费时间，但如果正确使用滤镜，对网站速度的影响会微乎其微。

此外，就像您可以在相机镜头上将多个滤镜堆叠在一起一样，您也可以依次应用任意数量的滤镜，以实现各种各样的效果。

使用 SVG 和 CSS 定义的滤镜

由于滤镜最初来自 SVG，因此有不同的方法来定义和使用它们。SVG 本身有一个 <filter> 元素，用于使用 XML 语法封装各种滤镜效果的定义。CSS 定义的一组过滤器采用了相同的图形模型，但它们的定义更为简单，易于在样式表中使用。

大多数 CSS 滤镜都可以用 SVG 滤镜来表示，CSS 还允许您根据需要引用 SVG 中指定的滤镜。CSS 滤镜设计者非常努力地让 Web 作者更轻松地应用滤镜，因此本文将仅介绍可直接从 CSS 获取的滤镜，暂时忽略 SVG 定义。

如何应用 CSS 过滤器

如需使用 CSS 中的滤镜，请将“filter”属性应用于网页上的任何可见元素。举一个非常简单的例子，您可以编写如下代码

div { { % mixin filter: grayscale(100%); % } }

这样会使页面上所有 <div> 元素内的内容变为灰色。非常适合让您的网页看起来像 1940 年代的电视画面。

大多数过滤器都采用某种形式的参数来控制完成的过滤程度。例如，如果您想将内容的样式设置为介于原始颜色和灰度版本之间的一半，可以这样操作：

div { { % mixin filter: grayscale(50%); % } }

如果您想依次应用多个不同的滤镜，只需在 CSS 中按顺序放置它们即可，如下所示：

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

该示例会先使所有原始颜色成为灰度模式，然后应用深褐色效果，最终将如下所示：

你可以灵活地逐个应用滤镜，实现各种效果 - 如何尝试打造令人惊叹的效果完全完全由你的想象力决定。

使用 CSS 可以实现哪些滤镜效果

因此，原始 SVG 滤镜机制既强大又难用。因此，CSS 引入了一系列标准滤镜效果，使用起来非常简单。

我们来分别了解一下它们各自的作用。

灰度（金额）

这会将输入图片中的颜色转换为灰色。应用的“金额”用于控制应用的灰色转化量。如果值为 100%，则所有颜色都将变为灰色；如果值为 0%，则颜色保持不变。如果您更喜欢使用浮点数，而不是百分比，可以在此处使用浮点数，即 0 的效果与 0% 相同，而 1.0 的效果与 100% 相同。

sepia(amount)

这会使传入的颜色呈现深褐色调，就像旧照片一样。应用的“量”与“灰阶”滤镜的运作方式相同，即 100% 会使所有颜色完全呈深褐色调，值越小，应用的效果比例就越小。

saturate(amount)

这会对颜色应用饱和度效果，使其看起来更鲜艳。这是一种很棒的效果，可以让照片看起来像海报或卡通图片。这种效果还可以让你使用大于 100% 的值来突出饱和度。这绝对是能让人看起来更奇特的效果！

hue-rotate(angle)

这是一种颜色极客效果，可以用于获得有趣的结果。它的作用是调整颜色，使输入图片看起来完全不同。如果您能想象出色轮上从红色到紫色的颜色光谱，那么此效果会将轮上的原始颜色作为输入，并按“angle”参数旋转该颜色，以便将轮上旋转到的颜色作为输出颜色值。因此，图片中的所有颜色都会按相同的“角度”在色轮上发生偏移。这当然是对它功能的简化，但希望足够接近有意义。

invert(amount)

此效果会翻转颜色，因此，如果应用的“amount”为 100%，输出内容看起来就像是使用旧式胶卷相机拍摄的负片照片！与之前一样，使用小于 100% 的值会逐渐应用反转效果。

opacity(amount)

如果您希望过滤后的内容看起来是半透明的，这就是您的理想之选。“amount”值定义了输出的不透明度。因此，值为 100% 表示完全不透明，因此输出将与输入完全相同。随着该值降至 100% 以下，输出图片的 непрозрачность会降低（变得更透明），您看到的图片也会越来越少。当然，这意味着，如果它与网页上的其他内容重叠，则底下的内容会开始显示。“amount”为 0% 表示它将完全消失，但请注意，您仍然可以在完全透明的对象上触发鼠标点击等事件，因此，如果您想创建可点击区域但不显示任何内容，这非常有用。

这与您已经熟悉的“opacity”属性的运作方式相同。通常，CSS“opacity”属性不会使用硬件加速，但某些使用硬件加速实现滤镜的浏览器会加速滤镜版本的 opacity，从而获得更出色的性能。

brightness(amount)

这就像电视的亮度控制。它会根据“amount”参数，调整全黑和原色之间的颜色。如果将此值设为 0%，您将只看到黑色，但随着该值逐渐提高到 100%，原始图片的亮度越来越高，直至达到与输入图片相同的值 100%。当然，您也可以继续调高亮度，例如将亮度调高到 200%，这样图片的亮度就会是原始亮度的两倍，非常适合调整低光照片！

contrast(amount)

通过电视机实现更多控制！这会调整输入图片中最暗和最亮部分之间的差异。如果您使用 0%，最终会得到黑色，就像使用“亮度”一样，因此没什么意思。不过，随着值逐渐增大至 100%，黑暗程度的差异也会发生变化，直到达到 100% 时，图片又恢复为原始图片。您还可以将此效果的值设为高于 100%，这样可以进一步增大浅色和深色之间的差异。

blur(radius)

如果您希望内容具有柔和边缘，可以添加模糊处理。这款滤镜看起来像是经典的玻璃上涂抹凡士林效果，这种效果曾经是电影制作中的热门技术。它会将所有颜色混在一起，并扩散其效果，就像您的眼睛失焦一样。“radius”参数会影响屏幕上相互融合的像素数量，因此值越大，模糊程度越高。当然，如果为零，图片将保持不变。

drop-shadow（阴影）

很高兴能让您的内容看起来像是在阳光下，背后有地面上的阴影，而“阴影”效果当然就是用来实现这一点的。它会对图片进行快照，将其设为单色，然后进行模糊处理，最后将结果稍微偏移，使其看起来像是原始内容的阴影。传入的“shadow”参数比单个值要复杂一些。它是以空格分隔的一系列值，其中一些值也是可选的！“阴影”值用于控制阴影的放置位置、所应用的模糊程度、阴影的颜色等。有关“阴影”值的作用的完整详情，请参阅CSS3 背景规范中的“方框阴影”。通过下面的几个例子，您应该可以大致了解各种可能性。

这是另一种与通过“box-shadow”属性提供的现有 CSS 功能类似的过滤操作。使用过滤器方法意味着，某些浏览器可能会对其进行硬件加速，如上文中所述的“不透明度”操作。

引用 SVG 滤镜的网址

由于滤镜起源于 SVG，因此您理应能够使用 SVG 滤镜为内容设置样式。借助当前的“filter”属性提案，这很容易实现。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 加快速度，但不一定适用于所有浏览器。如果不确定，最好的办法是尝试达到你想要的效果的“半径”，然后尽量减小半径，同时保持可接受的视觉效果。这样调整后，用户会更满意，尤其是在他们使用手机访问您的网站时。

如果您使用的是引用 SVG 滤镜的基于 url 的滤镜，它们可以包含任何任意滤镜效果，因此请注意它们也可能会运行缓慢，因此请尽量确保您了解滤镜效果的用途，并在移动设备上进行实验，以确保性能良好。

在现代浏览器中的可用性

目前，许多 CSS filter 效果都在基于 WebKit 的浏览器和 Mozilla 中提供。我们预计很快就会在 Opera 和 IE10 中看到这些功能。由于该规范仍处于开发阶段，因此一些浏览器供应商已使用供应商前缀实现这一点。因此，在 WebKit 中，您需要使用 -webkit-filter；在 Mozilla 中，您需要使用 -moz-filter；并留意其他浏览器实现的出现。

并非所有浏览器都会立即支持所有滤镜效果，因此效果会因浏览器而异。目前，Mozilla 浏览器仅支持 filter: url() 函数（不带供应商前缀），因为该实现早于其他效果函数。

下面，我们总结了各种浏览器中提供的 CSS 滤镜效果，并提供了在软件中实现这些效果时的大致性能指标。请注意，许多新型浏览器开始在硬件（GPU 加速）中实现这些功能。如果构建支持 GPU 的设备，性能将会大大提升，因为速度缓慢。一如既往，在不同浏览器上进行测试是评估性能的最佳方式。

其他实用资源

一款非常棒的带滤镜的互动抽象画应用，可让您进行实验并分享自己的艺术作品 请务必查看 Eric Bidelman 的超赞互动滤镜页面 一个很棒的滤镜教程及示例 官方 W3C 滤镜效果 1.0 草案规范http://dev.w3.org/fxtf/filters/ 使用滤镜创建的界面