Как размыть фон под блоком?

Question

[Алексей Иванов]

Добрый вечер!
На фоне у блока картинка, поверх, грубо говорю, элементы пазла, которые заблюрены. У каких-то рандомных элементов - нет размытия и видна часть фоновой картинки. Подскажите, как можно реализовать данную вещь?
Не очень хочется каждому маленькому элементу задавать кусочек фоновой картинки

Answer 1

[RAX7]

Comments

[Алексей Иванов]

Спасибо большое! То, что нужно

Answer 2

[Алекс Глебов]

не кроссбраузерно backdrop-filter: blur(30px);

Comments

[Алексей Иванов]

Останется как самый крайний вариант. Желательно конечно, что кроссбраузерное решение было. Спасибо

[Kovalsky]

А как же SVG? С ним будет максимально кроссбраузерно

[Алексей Иванов]

Kovalsky, у меня почему-то не получилось. Возможно что-то не так делал. Завтра ещё раз попробую на свежую голову

Правильно же я понимаю, что нужно использовать одну svg с эффектом blur, а применять через фильтр уже каждому элементу?

[Kovalsky]

Алексей Иванов, не так часто занимаюсь этим чтоб говорить наверняка, но вроде бы да. https://codepen.io/jstam/pen/FBCyL

Answer 3

[Артём Ведищев]

Я бы сделал двойной фон, так не надо будет выделять отдельные участки.

Comments

[Алексей Иванов]

В каком плане двойной фон? Один дефолтный, а поверх размытый?

Мне нужно именно элементы, чтобы можно было каждый разблюрить, например дополнительным классом или кликом. А элементов ~1900 штук

[Артём Ведищев]

Ну тогда JS тебе в помощь