CSS-Farbverlauf stoppt vom Ende in Pixel

Question

Ich arbeite an einem HTML/CSS/JS-Projekt, bei dem die App eine feste Größe hat und Elemente genau auf der Grundlage der Designs positioniert werden müssen. Da die Fenstergröße fest eingestellt ist, kann ich problemlos mit Pixel-Dimensionen in CSS arbeiten und muss mir keine Sorgen über die Größe des Browsers machen. Ich habe auch den Luxus, mich nicht um IE oder Opera zu kümmern: Die App muss nur in Webkit und Firefox funktionieren.

An einigen Stellen muss ich einen Gradienten Hintergrund über eine bestimmte Anzahl von Pixeln gehen. Dies würde leicht mit so etwas wie

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

erreicht werden (und seine -webkit- und -moz- Pendants.) Dies funktioniert der Trick für die meisten Elemente. Allerdings gibt es ein paar, wo ich die oberen und unteren Pixelpositionen für Farbstopps haben muss. Wenn diese Prozentpunkte waren, dann könnte es mit so etwas wie geschehen:

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

(von grau bis schwarz über 60px, dann transparent und dann schwarz das letzte 10% bis grau über). Allerdings muss ich dasselbe mit Pixeln erreichen, da das fragliche Element zu unterschiedlichen Zeiten unterschiedlich groß ist. Ich möchte vermeiden, JS zu verwenden, um den Gradient bei Bedarf an verschiedenen dynamisch berechneten Prozentpunkten erneut anzuwenden.

Also, meine Frage: Gibt es eine Möglichkeit, eine Farbe xPixel (nicht Prozentsatz) vom Ende aufhören zu spezifizieren?

Answer 1

Ich glaube nicht, das ist möglich, aber überlagert 2 Objekte, mit undurchsichtigen Pixeln von unten und die andere mit Pixeln von oben, würde vermieden, noch JS mit

.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

In der Zeile der vorhergehenden Antwort von Po228, aber im selben Element Hintergrund.

Set 2 verschiedene Steigungen, eine von oben beginnend und der andere von unten

.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

ich über diese via Suchmaschine kam gerade, ich denke, die beste Lösung bereits von vals gegeben wurde mit mehrere Hintergrundbilder verwenden - aber anstelle von background-size und background-position ich denke, es ist viel flexibler und stabil zu verwenden alpha Farben hier (mit rgba()), wie im Beispiel unten:

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

Das gibt mir genau das Verhalten, das ich anfangs suchte. :)

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