Градиент фонового изображения CSS со смещением

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

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

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

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

Ответы

Ответ 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 height).
);

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

См. также эту короткую демонстрацию.