Создание размытого фонового эффекта

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 как только вы закончите с всплывающим окном.