Я применил градиент как фоновое изображение к своему телу. Затем я добавил смещение 255px вверху, используя background-position:0 255px;.
Это выглядит неплохо, за исключением одной маленькой проблемы: конечно, градиент не заканчивается внизу страницы, а внизу 255px.
Есть ли какой-либо простой способ, чтобы конец градиента был внизу, но начинался со смещения от?
Вы можете добиться того, чего хотите: Поместите свой фон в 0px 0px и определите градиент с большим количеством остановок цвета, с одной сплошной областью цвета вверху, а затем с фактическим градиентом, например:
background-position: 0px 0px;
background-image: linear-gradient(to bottom,
#FFFFFF 0px, // Have one solid white area
#FFFFFF 255px, // at the top (255px high).
#C4C7C9 255px, // Then begin the gradient at 255px
#FFFFFF 100% // and end it at 100% (= body height).
);
(Пример кода работает с последними версиями Chrome и FireFox, но его адаптация для поддержки всех основных браузеров и версий выполняется прямолинейно, используя тот же принцип.)
См. также эту короткую демонстрацию.