创建模糊的背景效果

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孩子。