Gradiente di sfondo CSS con offset

Question

Ho applicato un gradiente come immagine di sfondo al mio corpo. Poi ho aggiunto l'offset 255 px in alto usando background-position:0 255px;.

Sembra abbastanza buono tranne un piccolo problema: ovviamente il gradiente non finisce in fondo alla pagina ma 255 px al di sotto.

C'è un modo semplice per far terminare il gradiente in basso ma iniziare con offset da a?

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

Answer 1

È possibile ottenere ciò che si vuole in questo modo: posiziona il background a 0px 0px e definire un gradiente con più colore-stop, avendo un settore solido di colore nella parte superiore e quindi il gradiente reale, in questo modo:

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

(il codice di esempio funziona su tutte le versioni di Chrome e Firefox, ma adattandolo a supportare tutti i principali browser e versioni è straight-forward, applicando lo stesso principio.)

Vedi anche questo short demo.