创建模糊的背景效果

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一旦完成弹出窗口,不要忘记解开孩子们.