Il colore gradiente CSS si arresta dalla fine in pixel

Question

Sto lavorando a un progetto HTML/CSS/JS in cui l'app è di dimensioni fisse e gli elementi devono essere posizionati con precisione, in base ai disegni. Poiché la dimensione della finestra è fissa, posso facilmente lavorare con le dimensioni dei pixel nei CSS e non preoccuparmi di ridimensionare il browser. Ho anche il lusso di non preoccuparmi di IE o Opera: l'app deve funzionare solo in webkit e firefox.

In alcuni punti, ho bisogno di avere uno sfondo sfumato che va oltre il numero specifico di pixel. Questo sarebbe essere facilmente realizzato con qualcosa come

background-image: linear-gradient(to top, #666666, #000000 60px); 

(e le sue controparti -webkit- e -moz-). Questo fa il trucco per la maggior parte degli elementi. Tuttavia ci sono un paio in cui ho bisogno di avere le posizioni dei pixel superiore e inferiore per i fermi colore. Se questi erano punti percentuali, allora si potrebbe fare con qualcosa di simile:

background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666); 

(dal grigio al nero su 60px, quindi trasparente e poi nero al grigio nel corso degli ultimi 10%). Tuttavia ho bisogno di realizzare lo stesso con i pixel, in quanto l'elemento in questione è dimensionato in modo diverso in momenti diversi. Mi piacerebbe evitare di dover utilizzare JS per riapplicare il gradiente a diversi punti percentuali calcolati in modo dinamico, se necessario.

Quindi, la mia domanda: c'è un modo per specificare un colore fermare xpixel (non percentuali) dalla fine?

Answer 1

non ritengo questo è possibile, ma sovrapponendo 2 oggetti, uno con pixel opachi dal basso e l'altro con i pixel dall'alto, sarebbe comunque evitare di usare JS

.background { 
    position: absolute; 
    background-image: linear-gradient(to top, #666666, black 60px, transparent 60px); 
} 
.overlay { 
    position: relative; 
    background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px); 
} 

Answer 2

Nella riga della precedente risposta da po228, ma sullo stesso sfondo.

Set 2 diversi gradienti, uno a partire dal top e l'altro dal basso

.test { 
 
    background: linear-gradient(to top, red 10px, white 10px), 
 
     linear-gradient(to bottom, blue 10px, white 10px); 
 
    background-size: 100% 50%; 
 
    background-repeat: no-repeat; 
 
    background-position: bottom center, top center; 
 
    height: 150px; 
 
    width: 300px; 
 
}

<div class="test"></div>

Answer 3

Sono venuto su questo tramite motore di ricerca, credo che la soluzione migliore era già dato da vals con l'utilizzo di immagini di sfondo multiple - ma invece di utilizzare background-size e background-position penso che sia molto più flessibile e stabile da usare colori alfa qui (con rgba()), come nell'esempio seguente:

background-image: 
    /* top gradient - pixels fixed */ 
    linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px), 
    /* bottom gradient - pixels fixed */ 
    linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px), 
    /* background gradient - relative */ 
    linear-gradient(to bottom, #eee 0%, #ccc 100%) ; 

Questo mi dà esattamente il comportamento che stavo inizialmente cercando. :)

Demo: http://codepen.io/Grilly86/pen/LVBxgQ