@AntonVirovets

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

Вот есть такая верстка! https://virovets.github.io/wikiAlerts2/
Как сделать так что бы фон размывался только на месте формы? то есть бэкграунд формы, это размытая часть background
  • Вопрос задан
  • 713 просмотров
Решения вопроса 1
sh3mahan
@sh3mahan
что-то вроде веб-разработчика
Такого эффекта можно добиться на CSS, если использовать две картинки оригинал и вторую с размытием, а также background-attachment: fixed для фона страницы и фона формы, а там позиционируйте свою форму как надо.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ksnk
filter:blur- все правильно, но 20 как-то сильно, лучше 4 или подобрать по месту. Ну и самое главное - поставить ту же самую картинку, что в бякграунде и двигать ее положение на JS при смене размера экрана. Правда фон лучше сделать фиксированный, а не cover, иначе расчетная часть будет слишком сложной для тостера.
Если хочется повозится с размером фона - нужно расcчитать размер элемента с фоном, поставить ему background-size: auto 100%; - это для определенности, это почти cover...
Элементу с блуром поставить background-size: auto <высота элемента с фоном> ;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы