CSS Градиент фона со смещением

Question

Я применил градиент в качестве фонового изображения для своего тела. Затем я добавил 255px offset сверху, используя background-position:0 255px;.

Это выглядит неплохо, за исключением одной маленькой проблемы: конечно, градиент не заканчивается в нижней части страницы, а внизу 255px.

Есть ли какой-либо простой способ, чтобы конец градиента был внизу, но начинался со смещения от?

http://jsfiddle.net/julian_weinert/ar6jC/

Answer 1

Вы можете добиться того, что вы хотите, как это: Поместите свой фон в 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's height). 
); 

(пример кода работает на последних версиях Chrome и FireFox, но адаптировать его поддерживают все основные браузеры и версии прямо вперед, применяя тот же принцип.)

См. Также этот short demo.