javascript - 类似 iOS 的半透明模态，模糊其背后的背景

Question

我想从 2012 年重新审视这个类似的问题。我想知道从发布该特定问题的时间起是否有任何变化？

是否可以创建一个不需要canvas渲染页面的模式，然后将其显示并裁剪为所需的大小？

如果是这样，有没有办法显示这个跨浏览器？

Answer 1

我看到@Michael Wasser 在上一个问题中提到了“-webkit-filter”。这就是你现在不依赖 Javascript 的方式。

img {
  -webkit-filter: blur(10px);
}

有关更多信息，请参阅此 HTML5Rocks 文章。

它的支持程度如何？

caniuse.com 表示，目前全球支持率为43.67%。所有最近的 Chrome、WebKit (Safari) 和 Opera（现在它切换到 Blink）都应该有它们。不确定 Mozilla 和 Microsoft 的计划是什么。

在 Firefox 中，您可能可以使用SVG 过滤器来重新创建模糊。