Как реализовать эффект размытия для фона, который все время меняется?

Question

[Sashqa]

Собственно сабж.

Есть футер и хедер. На них нужно сделать эффект blur. Но..

1) сайт резиновый
2) фон всегда меняется.
3) есть страницы вообще с яндекс картами.

Я нашел решение, но оно не подошло, т.к. в before нужно добавлять background самой картинки. Мне это не подходит.

Answer 1

[Nikolay Talanov]

Пару дней назад только демку запилил, там как раз имеется заблюривание целого блока, причем с транзишеном.
codepen.io/suez/pen/WvjRMb - нужно открыть меню и дальше все увидите. Просто применяется filter: blur(2px); для всего блока .demo__page и весь его контент блюрится. Это то что вам необходимо?
Само демо если что расчитано только на вебкиты (из-за clip-path), + там имеются тормоза на слабых компах (одна из причин как раз транзишен блюра, но это уже не суть как важно).

Comments

[Sashqa]

Выглядит не плохо) но это не то, что нужно)

[Nikolay Talanov]

Sashqa: А что конкретно необходимо? Размытие исключительно для бэкграунд картинки, не затрагивая контент?

[Sashqa]

Nikolay Talanov: Нет. Смотрите, есть 7 страниц (резиновые), на каждой странице свое фоновое изображение. На каждой странице есть футер и хедер, которые должны быть заблюрены. Также есть две страницы с Яндекс-картами, где также хедер и футер должны быть заблюрены. При этом я нашел решение.. Но там в псевдркласс вставляется сам бэкграунд и добавляется фильтр, если сделать так, то при ресайзе, этот блюр работает некорректно.

[Ярослав Алексеенко]

Nikolay Talanov: А это не твое случайно? https://www.pinterest.com/pin/342414377895688555/

[Nikolay Talanov]

Ярослав Алексеенко: Нет. Демка основана на основе этой гифки - https://dribbble.com/shots/2085771-i8-sidebar-animation
То что вы скинули, вот оригинал от того же дизайнер - https://dribbble.com/shots/2072658-i8-parallax
Я лишь оживляю гифки в вебе, с дизайном я не особо дружу :)

Answer 2

[Денис Инешин]

Нельзя сделать эффект матового стекла для динамических изображений на CSS. Только прозрачность. Максимум как то так: jsfiddle.net/IonDen/4t7un4b8, воспользовался вот этим генератором градиентов: www.colorzilla.com/gradient-editor