遮罩可以模糊其后面的内容

Question

作为一个纯审美设计的问题，我想知道是否有可能让一个带有非不透明背景的元素模糊掉其后面的内容。

更具体地说，当我弹出一个模态框时（作为我的自定义警告/确认/提示设置的一部分），目前的背景内容是通过在屏幕上放置与文档背景颜色相同的蒙版来“淡化”的。

我想做的是对被蒙版的内容应用少量的模糊效果（只有几个像素），以进一步引导注意力到模态框。

由于这完全是审美问题，浏览器兼容性并不是问题。最好能在IE9及以上版本和Chrome中运行。

另外不使用jQuery。如果您愿意，可以提供jQuery的答案，但我会将其翻译为原始JS代码后再将其应用到我的网站上。

- Niet the Dark Absol

---

你说不用jQuery，那你是用纯JavaScript实现的模态框吗？ - j08691

我的网站上所有的代码都是纯JS编写的，相比使用jQuery实现的相同功能，它的效率更高 ;) - Niet the Dark Absol

你不能使用一个透明的PNG或GIF来模拟模糊效果吗？就像这个 http://jsfiddle.net/j08691/hveTX/ - j08691

请参见https://dev59.com/KGQn5IYBdhLWcg3wGUAX。 - Ry-

Answer 1

使用纯CSS不可能实现...

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

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

- Gabriele Petrioli

---

Kay，谢谢你提供的信息，但正如你所说，这需要很多工作，所以我想我会放弃那个想法！ - Niet the Dark Absol

对于那些想了解现代解决方案的人来说，不妨关注一下backdrop-filter。 - Wildhoney

Answer 2

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

CSS：

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

- Marlon Macedo

Answer 3

Gaby提出的html2canvas解决方案可能有些过度。您可以通过使用已经模糊的同一网站的iframe（通过filter blur或其他技术进行模糊-"-webkit-filter: blur(2px)"只在chrome中有效，据我所知）来获得相同的效果。

话虽如此，我认为这两种解决方案都非常hacky，我个人永远不会使用它们。我只是出于好奇尝试了一下是否可能实现。

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

- Michael Wasser

Answer 4

这将需要使用JavaScript（而且是相当复杂的JavaScript）。

从我的理解来看，您似乎正在尝试创建一个“Aero玻璃”效果，在半透明元素后面的内容上应用模糊效果。仅使用HTML和CSS是不可能实现的（除非您考虑使用仅限IE的滤镜）。

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

- fswmacguy

---

谢谢指点 - 我知道IE过滤器的情况，我很担心这种情况会发生... - Niet the Dark Absol