创建模糊的背景效果

Question

我正在尝试在页面上创建模糊效果。我想要一个弹出窗口显示，然后页面的其余部分变得模糊。然而，我似乎只能模糊背景图像，而不是页面上的实际元素，是我想要做的甚至可能吗？

Answer 1

您可以模糊单个元素，但无法创建模糊叠加层。

幸运的是，CSS -prefix-filter: blur(##)会自动应用于子元素。你需要的是将每个元素除你的弹出窗口包装在div中，然后apply the blur to that。

示例JS：

$('body > *').wrap('<div class="blur-all">').append($popup);

CSS：

.blur-all {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

完成弹出窗口后，不要忘记打开.blur-all的孩子。