創建模糊的背景效果

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