模糊其背后内容的面具答案

【问题标题】：Mask that blurs content behind it模糊其背后内容的面具
【发布时间】：2012-03-18 15:25:03
【问题描述】：

作为一个纯粹的美学设计，我想知道是否可以让具有非透明背景的元素模糊其背后的内容。

更具体地说，当我出现一个模式框时（作为我的自定义警报/确认/提示设置的一部分），当前背景内容通过在屏幕上使用与文档背景颜色相同的遮罩来“淡化”。

我想做的是对蒙版内容应用少量模糊（仅几个像素），以进一步将注意力集中到模态框。

浏览器兼容性不是问题，因为正如我所提到的，它纯粹是为了美观。最好我希望它至少在 IE9 中工作，如果可能的话，在 Chrome 中工作。

另外，没有 jQuery。无论如何，如果您愿意，请在 jQuery 中提供答案，但我会先将其翻译成原始 JS，然后再让它靠近我的网站。

【问题讨论】：

【解决方案1】：

现在您可以使用backdrop-filter CSS 属性。

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

【讨论】：

【解决方案2】：

纯 CSS 无法实现..

您可以使用（有其局限性）html2canvas script 将页面呈现到画布上。
然后使用http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html 模糊该图像或您想要的部分
使用toDataUrl 获取图像并将其用作弹出窗口的背景...

这是一个相当复杂的过程，需要大量的 javascript，但我相信这是唯一的方法......

【讨论】：

【解决方案3】：

这需要 javascript（以及相当复杂的 javascript）。

据我了解，听起来您正在尝试创建“航空玻璃”效果，其中半透明元素后面的内容被赋予模糊效果。单独使用 HTML 和 CSS 是不可能的（除非您考虑使用 IE-only filters）。

目前，没有任何 CSS 属性可以像您描述的那样动态应用图像过滤器。

【讨论】：

【解决方案4】：

Gaby 提出的 html2canvas 解决方案可能有点矫枉过正。您可以使用已模糊的同一网站的 iframe 获得相同的效果（通过过滤器模糊或其他技术 - 据我所知，“-webkit-filter: blur(2px)”仅适用于 chrome。

这就是说，我想说这两种解决方案都非常老套，我个人永远不会自己使用任何一种。出于好奇，我尝试了这一点，看看是否有可能。

【讨论】：