CSS 的 `backdrop-filter` 属性

直到昨天，我从未听说过 `backdrop-filter` 属性，但在花几个小时玩弄它之后，我确信它除了魔法之外什么都不是。这是因为它在不改变文本或内部其他元素的情况下，会添加元素背景的滤镜（例如更改色调、对比度或模糊）。

以 这个示例 为例，我复制了 iOS 通知样式：您看到了每个框的背景是如何模糊的，但文本却没有吗？

只需要一行 CSS 就可以创建这种淡化背景效果，就像这样

.notification {
  backdrop-filter: blur(3px);
}

现在值得注意的是，此 CSS 属性的浏览器支持目前并不特别好（见下文）。但是，我们一直在尝试做这种过滤工作很长时间了，所以看到这里取得的进展真是太好了。Chris 在 2014 年写过关于 “磨砂玻璃”技术 的文章，在那时，您需要使用一堆奇怪的技巧和额外的图像来复制这种效果。现在，我们可以用更少的代码来获得相同的效果！

我们还可以选择比磨砂玻璃风格更多类型的滤镜。 以下演示 展示了所有 `backdrop-filter` 值以及它们如何改变背景

这些框只是我分别应用了不同 `backdrop-filter` 的单独 div。仅此而已！实际上，我有点难以置信这居然如此简单。

当然，您可以像这样将它们链接在一起

.element {
  backdrop-filter: blur(5px) contrast(.8);
} 

这可以创建各种精巧复杂的图案，特别是如果您开始将它们与动画结合在一起。

等等，我们为什么要需要这个属性呢？好吧，在阅读了一些资料后，似乎最常见的例子是某种形式的模态框。这是 Guillermo Esteves 在 2015 年 尝试的

查看 Guillermo Esteves 在 CodePen 上发布的 PwRPZa。

我认为如果我们集中精力，可以做到更加奇怪和美丽的事情。

关于浏览器支持的说明

在撰写本文时，`backdrop-filter` 属性的支持度并不高。即使在支持它的 Safari 中，您仍然需要为它添加前缀。Firefox 根本不支持它。但是，实际上，网站需要在所有浏览器中看起来完全相同吗？

进一步阅读

• MDN 上的 `backdrop-filter`
• 使用 `backdrop-filter` 在 CSS 中构建类似 iOS 的透明效果