jquery - 创建模糊的背景效果

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 的子元素。