CSS 배경 오프셋이있는 그라디언트

Question

그라디언트를 배경 이미지로 내 몸에 적용했습니다. 그런 다음 background-position:0 255px;을 사용하여 상단에 255 픽셀 오프셋을 추가했습니다.

하나의 작은 문제를 제외하고는 아주 좋아 보인다 : 물론 하단의 그라디언트는 255px로 끝나지 않는다.

그래디언트 끝을 아래쪽에 놓고 시작부터 오프셋까지 쉽게 시작할 수있는 방법이 있습니까? 이 같은 하나 개의 상단에 단색 영역 다음 실제 기울기를 갖는, 0px 0px에서 당신의 배경을 놓고 많은 색상 정지와 그라데이션을 정의

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

Answer 1

당신은 당신이 이런 식으로 원하는 것을 얻을 수 있습니다 :

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). 
); 

(샘플 코드는 크롬과 파이어 폭스의 최신 버전에서 작동하지만, 모든 주요 브라우저와 버전을 지원하는 데 적응하는 것은 같은 원리를 적용, 솔직하다.)

이것도 참조하십시오 short demo.