Всем привет!
Друзья, прошу помощи!
У меня есть такое задание:
"В макете - картинка, у которой размыт ее верх. Картинка всегда должна растягиваться на100% по ширине и высоте окна браузера, при открытии страницы и ресайзе окна. Картинка
должна быть фиксирована на фоне при прокрутке контента страницы (background-attachement
= fixed).
Под картинкой сделайте просто белую страницу с каким-нибудь длинным текстом, который и
необходимо будет прокручивать на странице.
При всем при этом размытая область вверху картинки должна прокручиваться вместе со
страницей. Т.е. должен создаваться эффект размытого стекла, которое лежит поверх
картинки, а при скролле просто поднимается вверх (опять же поверх картинки).
Видео как это должно работать:
https://cloud.mail.ru/public/29uD/RiiRVTrYj"
Я застрял на моменте, где нужно сделать размытие верхней части. Вот как я пытаюсь решить эту задачу:
https://codesandbox.io/s/falling-framework-n0r08Я добавил дивку и пытаюсь применить к ней размытие. Но размытие применяется только к тому контенту, который находится в самой дивке. А то, что находится за ней, остается не размытым. Подскажите, пожалуйста, как можно решить задачу?