Как сделать размытие картинки только там где форма?

Question

[AntonVirovets]

Вот есть такая верстка! https://virovets.github.io/wikiAlerts2/
Как сделать так что бы фон размывался только на месте формы? то есть бэкграунд формы, это размытая часть background

Comments

[Rustam Bainazarov]

backdrop-filter: blur (10px).

Но будет работать только в Safari.

Всё остальные варианты — хаки по типу тех, что написали авторы.

Answer 1

[Александр Шемаханов]

Такого эффекта можно добиться на CSS, если использовать две картинки оригинал и вторую с размытием, а также background-attachment: fixed для фона страницы и фона формы, а там позиционируйте свою форму как надо.

Comments

[ksnk]

если прикрутить параметр filter в стили формы - можно обойтись без дополнительной картинки

[AntonVirovets]

ksnk, так не получится.не работает. Форма сама расплывается, а нужно что бы фон размылся а не форма

[ksnk]

AntonVirovets, В исходной верстке слой с blur растянут под формой. Это отдельный элемент.
https://codepen.io/anon/pen/zVbwXy

[Александр Шемаханов]

ksnk, blur в данном случае еще и выглядит не очень красиво, за счет того что край не четкий, а размывается:

[Александр Шемаханов]

ksnk, можно этого избежать если задать .form overflow: hidden, а сам элемент .blur сделать шире чем .form

[ksnk]

Александр Шемаханов, А кто мешает рамочку нарисовать не в элементе form, а во вставленном в нее элементе? В исходной форме довольно сложная верстка именно для того, чтобы все выглядело как надо где надо
https://codepen.io/anon/pen/dBrVNa

[AntonVirovets]

Александр Шемаханов, ksnk, Спасибо большое! Все получилось!)

Answer 2

[ksnk]

filter:blur- все правильно, но 20 как-то сильно, лучше 4 или подобрать по месту. Ну и самое главное - поставить ту же самую картинку, что в бякграунде и двигать ее положение на JS при смене размера экрана. Правда фон лучше сделать фиксированный, а не cover, иначе расчетная часть будет слишком сложной для тостера.
Если хочется повозится с размером фона - нужно расcчитать размер элемента с фоном, поставить ему background-size: auto 100%; - это для определенности, это почти cover...
Элементу с блуром поставить background-size: auto <высота элемента с фоном> ;

Comments

[Александр Шемаханов]

filter: blur() размоет содержимое всей формы, получается способ не подходит