Как размыть(заблюрить) выделнную область на странице?

Question

[itmalex]

Как размыть выделенную область?

Comments

[Вадим]

Область статическая? Или контент под этой областью может меняться (как изменение контента, так и его трансформация\движение)?

[itmalex]

пользователь выделяет область и, что внутри должно размываться.

[Вадим]

itmalex, тогда только backdrop-filter. Либо ставить отдельную библиотеку, которая может делать скриншот выделенной области на канвасе, потом как-то её блюрить и вставлять как картинку фоном для блока, который нарисуется в результате действий пользователя. Примерно то же самое делает backdrop-filter под капотом. Другого варианта нет.

Answer 1

[Михаил]

https://developer.mozilla.org/en-US/docs/Web/CSS/b...

Comments

[itmalex]

Спасибо, но не все современные браузеры поддерживают, не говорю уже о старых.

Answer 2

[Владимир Коротенко]

Бокс с абсолютным позиционированием и блюр фоном, прозрачность подберете по желанию. Но учтите данные все равно есть

Comments

[itmalex]

Не получается. Можете показать как?

[itmalex]

backdrop-filter не подходит

[Владимир Коротенко]

itmalex,
Что?
Абсолютное позиционирование

Background-image какой нибудь пнг с облаками
Или opticaly?

[itmalex]

Владимир Коротенко, понял, ну это будет в крайнем случае если других вариантов не найдется.

[Владимир Коротенко]

itmalex, а вообще соприте идею у эхамацы. Или у медузы. Они во все поля используют это. Предлагая за их поделки денег платить

[itmalex]

Владимир Коротенко, а где спереть? :)

[Владимир Коротенко]

itmalex, в гугле забейте медуза вам и выкинет этот либеральный гадюшник

[Владимир Коротенко]

https://jsfiddle.net/vkorotenko/6vcdokL8/

Answer 3

[strelok011]

Когда вопрос задаете - лучше рассказывать и сопутствующие моменты. А еще - таблицу браузеров, под что совместимость пилить. И будет вам щасте )
Есть атрибуты стилей типа filter: blur, есть всевозможные эффекты через svg на том же механизме (примеров в инете навалом), а есть реализация супер дубовая и очень тяжеловесная, но совсем кроссбраузерная (фильтры в старых браузерах не везде работают) - создается канва, перехватывает битмап отрисованной страницы, библиотечкой на js успешно блюрится именно как растр.
Вот только если прячете текст - его надо блюрить на бэке. А на фронте - это просто не шибко полезные свистоперделки, которые еще и на производительности сказываются.

Comments

[Надим]

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