了解 CSS 滤镜效果

Question

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

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

滤镜效果起源于可缩放矢量图形 (SVG) 规范的一部分。 创建它们是为了将许多不同的基于像素的图像效果应用于矢量绘图。 随着时间的推移，随着浏览器供应商将 SVG 功能添加到他们的浏览器中，过滤器的实用性变得显而易见。 来自 Mozilla 的 Robert O'Callahan 想出了 一个绝妙的主意 ，即通过将 CSS 应用于“普通”HTML 内容来使用 SVG 过滤器。 Robert 制作了一个早期版本的原型，展示了过滤器和 CSS 样式组合的强大功能。 W3C 中的 CSS 和 SVG 工作组决定通过 CSS 样式协调 HTML 和 SVG 过滤器的使用，因此 CSS 的“过滤器”属性诞生了。 现在，一个由从事 CSS 和 SVG 工作的人组成的联合工作组正在做大量工作，以使过滤器普遍有用。 找到所有这些内容的当前规范 您可以在此处 。

过滤器 CSS 属性的新生命

当看到 CSS 样式中的“过滤器”时，Web 开发人员有时会感到似曾相识。 这是因为旧版本的 Internet Explorer 具有通过 CSS 公开的“过滤器”属性以执行某些特定于平台的功能。 这已被 弃用 ，取而代之的是标准的“filter”属性，它现在是 CSS3 的一部分。 因此，当您在一些旧网页上随意看到“过滤器”时，无需感到困惑。 新的“过滤器”属性是所有操作所在的地方，新版本的 IE 正在实现它，就像所有现代浏览器一样。

过滤器的工作原理

那么过滤器到底做了什么？ 最简单的方法就是将过滤器看作是一个后处理步骤，它会在您的所有页面内容都已布局和绘制后执行神奇的操作。

当浏览器加载网页时，它需要应用样式、执行布局，然后呈现页面以便查看内容。 过滤器在所有这些步骤之后和页面被复制到屏幕之前启动。 他们所做的是将渲染页面的快照作为位图图像，然后对快照中的像素执行一些图形魔术，然后将结果绘制在原始页面图像的顶部。 可以将它们想象成放置在相机镜头前部的滤镜。 您通过镜头看到的是经过滤镜效果修改后的外部世界。

这当然意味着在绘制带有过滤器的页面时会消耗时间，但正确使用它们对网站速度的影响微乎其微。

此外，正如您可以在相机镜头上将多个滤镜堆叠在彼此前面一样，您可以一个接一个地应用任意数量的滤镜来实现各种效果。

使用 SVG 和 CSS 定义的过滤器

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

大多数 CSS 滤镜都可以用 SVG 滤镜表示，如果需要，CSS 还允许您引用 SVG 中指定的滤镜。 CSS 滤镜设计者煞费苦心地让 Web 作者更容易使用滤镜，因此本文将只介绍直接从 CSS 获得的滤镜，暂时忽略 SVG 定义。

如何应用 CSS 过滤器

注意：下面的描述和示例使用最终将在所有现代浏览器中可用的官方 W3C 语法。 现在要使用过滤器，您需要使用“过滤器”属性的供应商前缀版本。 但是不要担心，在本文末尾有一个简单的方法来处理它。

使用 CSS 中的过滤器是通过使用应用于网页上任何可见元素的“过滤器”属性来完成的。 对于一个非常简单的例子，你可以写类似

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

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

Original image.

Grayscale filtered image.

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

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

Original image above but 50% gray filtered.

如果你想一个接一个地应用许多不同的过滤器，这很简单 - 只需将它们按顺序放在你的 CSS 中，如下所示：

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

该示例将首先使所有原始颜色灰度化，然后应用棕褐色效果，最终看起来像：

有了一个接一个地应用滤镜的灵活性，可以实现各种效果 - 完全取决于您的想象力来尝试创造惊人的结果。

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

因此，原始的 SVG 过滤器机制既强大又难以使用。 正因为如此，CSS 引入了一堆标准的滤镜效果，使它们的使用变得非常容易。

让我们来看看他们每个人，看看他们做了什么。

灰度（数量）

这会将我们输入图像中的颜色转换为灰色阴影。 应用的“数量”控制应用多少灰色转换。 如果它是 100%，那么一切都将是灰色阴影，如果它是 0%，则颜色保持不变。 如果您更喜欢浮点数而不是百分比，则可以在此处使用浮点数，即 0 与 0% 相同，而 1.0 与 100% 相同。

Original

grayscale(100%)

棕褐色（数量）

这使颜色以棕褐色调传递，就像在旧照片中一样。 应用的“数量”与“灰度”滤镜的工作方式相同——即 100% 使所有颜色完全变成棕褐色，较小的值允许以较小的比例应用效果。

Original

sepia(100%)

饱和（量）

这对颜色应用了颜色饱和度效果，使它们看起来更鲜艳。 这是一种很酷的效果，可以使照片看起来像海报或卡通。这种效果还允许您使用大于 100% 的值来真正强调饱和度。 绝对是一种可以让事情看起来很时髦的效果！

Original

saturate(10)

注意：根据 W3C 规范，在 Chrome 版本 19 中，saturate() 函数采用整数（不带百分号）而不是小数或百分比。 不用担心，这个已知的错误将得到修复。

色调旋转（角度）

这有点像色彩极客效果，可用于产生有趣的结果。 它所做的是四处移动颜色，使输入图像看起来完全不同。 周围的色谱从红色变为紫色 如果您可以想象色轮 ，那么此效果将色轮上的原始颜色作为输入并按“角度”参数旋转它以在轮子上产生它旋转到的颜色输出颜色值。 因此，图像中的所有颜色都在色轮上移动了相同的“角度”。 这当然是对其功能的简化，但希望足够接近以使其有意义。

Original

hue-rotate(90deg)

反转（数量）

这种效果会翻转颜色 - 因此，如果应用的“数量”为 100%，则输出看起来就像旧胶卷相机时代的负片照片！ 就像以前一样，使用小于 100% 的值将逐渐应用反转效果。

Original

invert(100%)

不透明度（数量）

如果您希望被过滤的内容看起来是半透明的，这就是您的最佳选择。 'amount' 值定义了输出的不透明程度。 所以 100% 的值是完全不透明的，所以输出将与输入完全相同。 当该值低于 100% 时，输出图像将变得不透明（更透明），您会看到越来越少。 这当然意味着如果它与页面上的其他内容重叠，下面的内容将开始变得可见。 “数量”为 0% 意味着它会完全消失 - 但请注意，您仍然可以在完全透明的对象上发生鼠标点击等事件，因此如果您想创建可点击区域而不显示任何内容，这会很方便。

这与您已经知道的“不透明度”属性的工作原理相同。 一般来说，CSS“opacity”属性不是硬件加速的，但一些使用硬件加速实现过滤器的浏览器会加速不透明度的过滤器版本以获得更好的性能。

Original

opacity(50%)

亮度（量）

这就像电视上的亮度控制一样。 它根据“数量”参数在全黑和原始颜色之间调整颜色。 如果你将这个设置为 0%，你只会看到黑色，但随着该值接近 100%，你会看到越来越多的原始图像变亮，直到你达到 100%，它与输入图像相同. 当然，您可以继续 - 所以设置 200% 之类的值会使图像的亮度是原始图像的两倍 - 非常适合调整那些低光照片！

Original

brightness(140%)

对比度（量）

电视机的更多控制！ 这将调整输入图像最暗和最亮部分之间的差异。 如果你使用 0%，你最终会得到黑色，就像“亮度”一样，所以不太有趣。 然而，当您将该值增加到 100% 时，暗度差异会发生变化，直到您达到 100% 并且它又是原始图像。 您也可以超过 100% 以获得此效果，这会进一步增加浅色和深色之间的差异。

模糊（半径）

如果您想要内容的柔和边缘，可以添加模糊。 这个看起来像是玻璃板上的经典凡士林，曾经是一种流行的电影制作技术。 它会将所有颜色涂抹在一起并分散它们的效果 - 有点像当你的眼睛没有聚焦时。 “半径”参数影响屏幕上有多少像素相互融合，因此较大的值会产生更多的模糊。 零当然会使图像保持不变。

Original

blur(10px)

阴影（阴影）

能够使您的内容看起来像是在外面的阳光下，后面的地面上有阴影，这真是太好了，当然这就是“投影”的作用。 它拍摄图像的快照，使其成为单一颜色，对其进行模糊处理，然后稍微偏移结果，使其看起来像原始内容的阴影。 传入的 'shadow' 参数比单个值要复杂一些。 它是一系列由空格分隔的值 - 有些值也是可选的！ 'shadow' 值控制放置阴影的位置、应用了多少模糊、阴影的颜色等。有关 'shadow' 值作用的完整详细信息，CSS3 背景规范在 great 中定义了 box-shadow 细节。 下面的几个例子应该能让你对各种可能性有一个很好的了解。

drop-shadow(16px 16px 20px black)

drop-shadow(10px -16px 30px purple)

这是另一个过滤操作，类似于通过“box-shadow”属性提供的现有 CSS 功能。 使用过滤器方法意味着它可能会像我们上面针对“不透明度”操作所描述的那样，通过某些浏览器获得硬件加速。

URL 引用 SVG 过滤器

由于过滤器起源于 SVG 的一部分，因此您应该能够使用 SVG 过滤器来设置内容的样式是合乎逻辑的。 使用当前的“过滤器”属性提案很容易做到这一点。 SVG 中的所有滤镜都定义有一个 id 属性，可用于引用滤镜效果。 因此，要使用 CSS 中的任何 SVG 过滤器，您需要做的就是使用“url”语法引用它。

例如，过滤器的 SVG 标记可能类似于：

<filter id="foo">...</filter>

然后从 CSS 你可以做一些简单的事情：

div { +filter: url(#foo); }

您文档中的所有 <div> 都将使用 SVG 过滤器定义设置样式。

自定义（即将推出）

即将出现的是自定义过滤器。 这些利用您的图形 GPU 的强大功能，使用 特殊的着色 语言来执行仅由您自己的想象力所限制的惊人效果。 “过滤器”规范的这一部分仍在讨论中并且在不断变化，但是一旦这开始出现在您附近的浏览器中，我们一定会写更多关于可能的内容。

性能考虑

每个 Web 开发人员都关心的一件事是他们的网页或应用程序的性能。 CSS 过滤器是一种强大的视觉效果工具，但同时可能会对您网站的性能产生影响。

了解它们的作用以及这如何影响性能很重要，特别是如果您希望您的网站在支持 CSS 过滤器的移动设备上运行良好。

首先，并非所有过滤器都生而平等！ 事实上，大多数过滤器在任何平台上都可以非常快速地运行并且对性能的影响非常小。 但是，进行任何类型模糊处理的过滤器往往比其他过滤器慢。 这当然意味着“模糊”和“阴影”。 这并不意味着您不应该使用它们，但了解它们的工作原理可能会有所帮助。

当您执行模糊时，它会混合输出像素周围像素的颜色以生成模糊结果。 因此，假设您的半径参数为 2，则滤镜需要在每个输出像素周围的每个方向上查看 2 个像素以生成混合色。 每个输出像素都会发生这种情况，因此这意味着当您增加半径时，大量计算会变得更大。 由于“模糊”向各个方向看，将“半径”加倍意味着您需要查看 4 倍的像素，因此实际上半径每次加倍都会慢 4 倍。 drop-shadow 滤镜包含一个 blur 作为其效果的一部分，因此当您更改 shadow 参数的 radius 和 spread 部分时，它的行为也与 blur 一样。

模糊不会丢失所有内容，因为在某些平台上可以使用 GPU 对其进行加速，但这不一定在每个浏览器中都可用。 当有疑问时，最好的办法是试验能给你想要的效果的半径，然后尽量减少它，同时仍然保持可接受的视觉效果。 以这种方式调整将使您的用户更快乐，尤其是当他们通过电话使用您的网站时。

如果您正在使用引用 SVG 滤镜的基于“url”的滤镜，它们可以包含任意滤镜效果，因此请注意它们也可能很慢，因此请尝试确保您知道滤镜效果的作用并在移动设备上进行试验以确保性能正常。

在现代浏览器中的可用性

目前，基于 WebKit 的浏览器和 Mozilla 中提供了许多 CSS“过滤器”效果。 我们希望很快能在 Opera 和 IE10 中看到它们。 由于规范仍在开发中，一些浏览器供应商已经使用供应商前缀实现了这个东西。 因此，在 WebKit 中，您需要使用“-webkit-filter”，在 Mozilla 中，您将需要使用“-moz-filter”，并留意其他浏览器的实现。

并非所有浏览器都会立即支持所有滤镜效果，因此您的里程会有所不同。 目前，Mozilla 浏览器仅支持“filter: url()”函数——没有供应商前缀，因为该实现早于其他效果函数。

我们总结了以下各种浏览器中可用的 CSS 滤镜效果，以及它们在软件中实现时的粗略性能指标。 请注意，许多现代浏览器开始在硬件（GPU 加速）中实现这些。 当这些在 GPU 支持下构建时，对于较慢的效果，性能将大大提高。 像往常一样，在不同的浏览器上进行测试是评估性能的最佳方式。

Filter effect	Browser support	Performance
grayscale	Chrome	very fast
sepia	Chrome	very fast
saturate	Chrome	very fast
hue-rotate	Chrome	fast
invert	Chrome	very fast
opacity	Chrome	can be slow
brightness	Chrome	fast
contrast	Chrome	fast
blur	Chrome	slow unless accelerated
drop-shadow	Chrome	can be slow
url()	Chrome, Mozilla	Varies, fast to slow