使用 CSS 的背景滤镜效果

昨天我在一个网站上发现了一个很酷的效果，于是尝试把它复制到我正在开发的一个新的Web应用中。它有一个透明容器，可以在其背后的背景图像上创建滤镜背景，效果非常棒。

效果如下：

我尝试了常用的 CSS 属性 filter: blur(10px)，但这只会模糊容器本身，而不会模糊元素背后的背景。经过一番研究，我找到了一个非常简单的单行 CSS 属性来实现这个效果。从那时起，我就在自己创建的每个应用或设计中（在合适的地方）都使用它。

这里是：

.container {
    backdrop-filter: blur(10px);
}

我不知道 CSS 属性存在！

现在在容器后面添加一张背景图片，看看效果如何。很酷吧？

注意：某些浏览器可能不支持该属性。但主流浏览器（例如 Chrome、Firefox 和 Edge）都支持该属性。

试试看，然后告诉我你的想法。下次再见！