nastya97core
@nastya97core
Начинающий программист

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

Здравствуйте. Как сделать вот такое:
602b51b6a46a2942658265.png
https://dribbble.com/shots/15117313-Ren-Interactio...

Понятно, что можно взять просто картинку и кинуть на неё фильтр blur, однако это абсолютно не эффективно с точки зрения производительности. Поэтому возникает вопрос: можно ли как-нибудь сделать такое изображение и кидать на фон? Вариант с несколькими слоями градиентов я тоже исключаю, так как там тоже нагрузка будет.

Я задаю вопрос, потому что видела на каком-то сайте (не помню) эффект прелоадера, когда перед загрузкой изображения было оно же, но в размытом виде. Отсюда у меня вывод, что такой фон у них не был энергозатратным и не имел большой вес. Ну и в их случае точно отпадают градиенты, потому что не вариант собирать картинку с помощью linear-gradient (и других)
  • Вопрос задан
  • 116 просмотров
Пригласить эксперта
Ответы на вопрос 2
@VitalyChaikin
backdrop-filter: blur(5px);
Ответ написан
@forspamonly2
для таких прелоадеров с бэка отдают заинлайненые в data uri версии картинок в крайне маленьком разрешении (порядка 10 на 8 пикселов), которые на клиенте дополнительно сильно размазывают блюром чтобы не было видно пикселизацию.
Ответ написан
Ваш ответ на вопрос

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

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