css - 模糊其背后内容的面具

Question

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

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

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

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

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

score 1 · Accepted Answer

纯 CSS 不可能..

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

score 1 · Accepted Answer

现在你可以使用backdrop-filterCSS 属性。

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

score 0 · Accepted Answer

这将需要 javascript（和相当复杂的 javascript）。

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

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

score 0 · Accepted Answer

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

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

4 回答 4