Nền phông nền CSS có độ lệch

Question

Tôi đã áp dụng một hình nền làm hình nền cho cơ thể của mình. Sau đó, tôi đã thêm 255px offset ở trên cùng bằng cách sử dụng background-position:0 255px;.

Có vẻ khá tốt ngoại trừ một vấn đề nhỏ: tất nhiên độ dốc không kết thúc ở cuối trang nhưng 255px bên dưới.

Có cách nào dễ dàng để kết thúc gradient ở dưới cùng nhưng bắt đầu với bù đắp từ đến?

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

Answer 1

Bạn có thể đạt được những gì bạn muốn như thế này: Đặt nền của bạn tại 0px 0px và xác định một gradient với nhiều màu điểm dừng, có một khu vực rắn màu ở phía trên và sau đó gradient thực tế, như thế này:

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

(mẫu mã hoạt động trên các phiên bản mới nhất của Chrome và FireFox, nhưng thích nghi với nó để hỗ trợ tất cả các trình duyệt chính và các phiên bản là thẳng về phía trước, áp dụng nguyên tắc tương tự.)

Xem thêm, đây là short demo.