jquery - 创建模糊的背景效果

Question

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

Answer 1

您可以模糊单个元素，但不能创建模糊叠加。

幸运的是，CSS-prefix-filter: blur(##)会自动应用于子元素。您需要将除弹出窗口之外的每个元素都包装在 div 中，然后将模糊应用于该.

示例 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完成弹出窗口后，不要忘记打开子项。