CSS Background Gradient со смещением

Question

Я применил градиент в качестве фонового изображения для моего тела. Затем я добавил смещение 255px вверху, используя 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, но адаптировать его для поддержки всех основных браузеров и версий достаточно просто, применяя тот же принцип.)

Смотрите также это короткое демо.