掩盖其背后的内容

Question

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

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

我想做的是对蒙面内容应用少量模糊（仅几个像素），以进一步引起对模态框的注意。

浏览器兼容性不是问题，因为我提到它纯粹是审美的。我希望它至少可以在IE9中使用，如果可能，我希望使用Chrome。

此外，没有jQuery 。无论如何，如果你愿意，可以在jQuery中提供答案，但我会将它翻译成原始JS，然后再将它放在我的网站附近。

Answer 1

纯CSS无法实现..

• 您可以使用{及其限制）html2canvas script将网页呈现为画布。
• 然后使用http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
模糊该图像或所需部分
• 使用toDataUrl获取图片并将其用作弹出窗口的背景......

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

Answer 2

如今，您可以使用backdrop-filter CSS属性。

CSS：

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

Answer 3

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

据我所知，听起来你正试图创造一种'Aero glass'效果，其中半透明元素背后的内容会产生模糊效果。仅使用HTML和CSS是不可能的（除非您考虑使用IE-only filters）。

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

Answer 4

Gaby提供的html2canvas解决方案可能有点过分。您可以使用相同网站的iframe获得相同的效果（通过滤镜模糊或其他技术 - “-webkit-filter：blur（2px）”仅在我知道的Chrome中有效。

这就是说，我说这两种解决方案都非常真实，而且我个人从未使用过。我试着这样做只是为了看看它是否有可能出于好奇。

请在此处查看（仅限铬）示例：https://s3.amazonaws.com/blur-demo/index.html