@AntonVirovets

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

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

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
от 60 000 до 90 000 руб.
Sellfashion Нижний Новгород
от 100 000 до 150 000 руб.