介绍背景滤镜

我们最近的博客文章重点介绍了 WebKit 中添加的重要性能和开发者功能。但 WebKit 不仅仅提供出色的开发者工具；我们还构建用于创作精彩网络内容的功能。在这篇文章中，我很高兴分享一个设计师们期待已久的重要新功能：背景滤镜。让我们先简单解释一下为什么这个功能很重要，然后深入探讨如何开始使用它。如果您正在运行最新的 WebKit 每夜构建版本，您可以亲自尝试示例！

背景

iOS 7 和 OS X Yosemite 的用户界面设计语言改变，融入了一些漂亮的背景模糊效果。这种分层赋予了深度感，同时避免了下方内容的细节使前景显得杂乱。下图显示了视频上方的 WebKit 媒体控件。请注意，您可以通过磨砂玻璃效果看到一些背景内容。

在这个特写中更容易看到，它是使用更生动的源视频捕获的。

我们希望 WebKit 媒体控件在相关平台上也能拥有这种视觉风格。然而，这些控件是用 HTML、CSS 和 JavaScript 实现的。设计师希望在他们的网页设计中使用这些美丽的特效，但一直未能如愿，因为这些效果仅限于原生应用程序。这使得嵌入式网页视图无法像原生控件一样美观。它也阻碍了这些效果用于网站创作。直到最近，还没有标准的、符合规范的方法来制作这些效果。许多设计师被迫使用预渲染的背景内容，并通过仔细裁剪和定位这些素材来制造模糊背景的假象，以达到所需效果。不幸的是，就像大多数幻觉一样，这种方法经不起仔细推敲。

• 每当背景图像或模糊特性发生变化时，都必须生成新的艺术作品。
• 为了维持这种错觉所需的精确对齐和裁剪可能导致像素裂缝和其他显示问题。
• 针对每种目标显示分辨率都需要不同的模糊图像。
• 动态布局或动画在用户与页面交互时需要复杂且可能成本高昂的计算。

简而言之，开发者们被迫煞费苦心地采取措施来实现所需效果，而不是专注于他们的网站设计。

背景滤镜

我们看到了如此多使用这些“西西弗斯式”技术（徒劳无功的努力）的例子，因此我们创建了一个新的 CSS 样式，并将其提议作为 CSS 滤镜效果模块第 2 级的一部分。`backdrop-filter` 样式允许我们为元素添加背景效果，这些效果类似于 iOS 和 OS X 中那些激发了我们此次讨论的效果。这个新样式让浏览器引擎能够完成实现这种效果所需的复杂计算和定位。

1. WebKit 从样式化元素后面的内容开始处理。请注意，这并非元素的背景，而是将绘制在元素后面的内容。
2. 然后，WebKit 将模糊效果应用于该内容。
3. 最后，背景与页面上的其他元素合成，以产生最终结果。

示例： backdrop-filter: blur(10px);

由于这些模糊操作在浏览器引擎中完成，我们可以利用硬件支持，从而实现非常高效的操作。然而，请注意！这种背景效果的本质迫使引擎执行更多的渲染通道，这会对性能产生影响。请确保只在最需要的地方使用此功能。

我们希望开发者能够自由地在设计中使用各种滤镜，因此 `backdrop-filter` 支持我们 CSS 滤镜实现所提供的所有效果。这意味着我们可以利用背景实现各种令人兴奋的效果

示例： backdrop-filter: invert();

我们还可以组合多个滤镜

示例： backdrop-filter: blur(10px) grayscale(100%);

最棒的是，这种效果是完全动态的——它可以用于 HTML5 媒体、CSS 动画、WebGL 和其他动态内容之上。这是您在设计方面所能实现的惊人进步。在此样式之前，您无法实现这种效果。

标准化

WebKit 去年向 CSS 工作组提出了此功能，目前它已包含在 CSS 滤镜级别 2 规范的编辑草案中。我们目前正在为此属性添加前缀，以符合 W3C 对尚未完成标准化过程的功能的要求。因此，当您在自己的 CSS 中使用它时，需要编写 -webkit-backdrop-filter。

反馈

我们希望您喜欢这个新功能，并与我们分享您的作品！如果您发现错误，请在 bugs.webkit.org 报告。一如既往，如果您对该（或其他）滤镜效果有任何建议或反馈，请通过 public-fx@w3.org 邮件列表分享。对于简短问题，您可以在 Twitter 上联系我或Dean Jackson。对于较长的问题，您可以发送电子邮件至webkit-help。

鸣谢

国际空间站的图像和视频均从 NASA 网站获取，并在公共领域下使用。