使用 CSS 实现背景模糊效果 | CSS-Tricks

我喜欢这些简短的文章，它们通过一行使用鲜为人知的 CSS 属性来解决一些看似棘手的设计问题。在本例中，设计是一个磨砂玻璃效果，而 CSS 属性是 backdrop-filter。

方法？非常简单

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

文章中的评论值得一看，因为它们讨论了跨浏览器支持。覆盖率实际上相当不错。 Caniuse 显示全球覆盖率为 83%，Firefox（以及可以预见的 Internet Explorer）缺乏支持。一位评论者提供了一个不错的后备方案，以及一个稍微调整饱和度的效果。

.container {
  background: rgba(0,0,0,0.8);
  backdrop-filter: saturate(180%) blur(10px);
}

不错。但我们可以通过在其中添加 @supports 来更进一步，如我们在 background-filter 年鉴条目中演示的那样。

.container {
  background: rgba(0,0,0,0.8);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

请注意其中的 -webkit 前缀。尽管在生产环境中使用它仍然有价值，但这并不是什么大问题，假设您已连接了 Autoprefixer。以下是年鉴中的演示

好吧，也许它不像看起来那样是一行代码的解决方案。但嘿，CSS 中这种事情相对简单还是挺酷的。

直达链接 →