Суть задачи – в psd-макете был фон с картинкой и градиентом, который вверху четкий и контрастный, а к нижней части страницы переходит в один цвет и картинка затухает.
Делать такой фон картинкой не сильно интересно, потому что на длинной странице этот фон затухнет еще до половины страницы, а потом надо будет задать просто одноцветный фон, а на маленькой странице затухание мы почти не увидим. Поэтому, долго не думая, этот фон был создан при помощи css multiple backgrounds. Их суть в том, что для одного элемента можно задать несколько фоновых рисунков. Они будут располагаться поверх друг друга: фон, заданный первым – в самом верху, последний фон – в самом низу.
Пример короткой записи множественных фонов:
.myclass {
background: background1, background 2, ..., backgroundN;
}
Идея такая:
- самый верхний слой – это градиент от прозрачного к светлому фону, который будет создавать эффект затухания картинки, этот слой будет в самом верху;
- второй слой – это картинка размноженная по всей странице;
- первый слой – это градиент от светлого к темному цвету, этот слой будет в самом низу.
При этом, надо не забывать, что фон, заданный первым будет в самом верху, последний фон окажется в самом низу.
Получаем такой CSS на рабочем проекте:
body {
background-image: linear-gradient(to top, #c0dce3, transparent),
url(https://denis-creative.com/wp-content/uploads/2018/05/bg-stars.png),
linear-gradient(to top, #c0dce3, #02728e);
background-repeat: no-repeat, repeat, no-repeat;
background-position: 0 0, 0 0, 0 0;
}
Рабочий пример множественных фонов:
See the Pen multiple-background css by Denis (@deniscreative) on CodePen.0