Blur содержимого под блоком — как реализовать?

Question

[Денис Букреев]

Есть заблюривание содержимого контейнера: filter: blur(100px);

Но, что делать, если надо заблюрить то, что находится под контейнером?

Answer 1

[Stalker_RED]

Для картинки как-то так: https://css-tricks.com/frosting-glass-css-filters/
Пример: https://jsfiddle.net/7mtkwheL/

Если нужно не для картинки, а для dom-элементов в фоне, то все несколько сложнее. Можно захватить изображение в canvas, размыть и показать.

Answer 2

[Vitaliy]

CSS такого делать не умеет. Помню, когда то находил реализации под Safari, но дальше iOS это не пошло. Поэтому единственный вариант:
продублировать все что в фоне и размыть. Достаточно легко реализуется для фона-картинки, и почти нереализуемо для всех возможных элементов, так как все что в фоне нужно повторно добавить в нужный блок, обрезать, размыть, и при этом нужно соблюдать чтобы все совпадало

jsfiddle.net/SvH6w/6

Answer 3

[Олег]

Просто оставлю это здесь, может кому-то будет еще полезным быстро найти ответ. Свойство backdrop-filter позволяет размыть фон ЗА БЛОКОМ ... при этом сам блок должен быть конечно с прозрачностью, чтоб сквозь него было видно результат (эффект мутного стекла).
backdrop-filter: blur(10px);
... аргумент 10px можно конечно заменить на свою, подходящую величину

Comments

[ArtemKov32]

Специально сейчас зарегался на хабре, чтобы написать, что ты бог. От души