Das Problem

In einem aktuellen Projekt kann auf Unterseiten einer Website ein Hintergrundverlauf zugeschaltet werden, der von transparent zu schwarz übergeht. Das ist erst einmal kein Problem, immerhin können mittlerweile sowohl kreisförmige als auch lineare Verläufe mit Css umgesetzt werden. Der Ultimate CSS Gradient Generator ist ein wunderbares Tool zur Umsetzung solcher Verläufe. Der benötigte lineare Verlauf sieht so aus:

background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.75) 20%,rgba(0,0,0,0.85) 25%,rgba(0,0,0,0.95) 30%,rgba(0,0,0,1) 45%,rgba(0,0,0,1) 100%);

Der Verlauf wird dadurch einwandfrei gezeichnet- aber es gibt ein Problem: Auf unterschiedlich hohen Seiten sind die color stops zwar prozentual an der selben Position, nicht aber wenn es um die tatsächliche Position in Pixeln vom Beginn der Seite geht. 15% von 1000 Pixel entspricht natürlich einem anderen Wert als 15% von 833 Pixel. Ich habe eine Demo-Seite gebaut, auf der das Problem grafisch aufbereitet gezeigt wird.

Die Lösung(en)

Es gibt mindestens zwei Lösungswege für dieses Problem. Der eine besteht darin, dem Verlauf eine Größe zuzuweisen, während die andere Lösung mit Pixelwerten für die Position der color stops arbeitet.

Die Größe des Hintergrunds begrenzen

Mit der background-size-Eigenschaft kann die Größe eines Hintergrunds angegeben werden. Da ich in meinem Fall die Höhe des Verlaufs auf 650 Pixel begrenzen wollte, habe ich folgendes probiert:

background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 15%,rgba(0,0,0,0.75) 20%,rgba(0,0,0,0.85) 25%,rgba(0,0,0,0.95) 30%,rgba(0,0,0,1) 45%,rgba(0,0,0,1) 100%);
background-size: 100% 650px;

Dadurch wird gewährleistet, dass der Verlauf sich nicht mehr der Seitenhöhe anpasst, sondern exakt 650 Pixel in der Höhe annimmt. Das bringt allerdings ein neues Problem mit sich: Sobald die Seite höher als 650 Pixel ist, fehlt ab dieser Position der Hintergrund. Der Verlauf hört eiskalt auf und bleibt von 651 Pixel bis (beliebig hohe Zahl < 651 Pixel) transparent. Das Hinzufügen einer Hintergrundfarbe mittels background-color funktioniert leider nicht, da diese ansonsten den (semi-)transparenten oberen Teil des Verlaufs überlagert.
Daher schied diese Lösung leider aus und ein anderer Versuch musste unternommen werden, den Verlauf auf die gewünschte Art und Weise zeichnen zu lassen.

Pixelwerte in der Verlaufs-Eigenschaft

Beim Herumexperimentieren mit der Größe des Verlaufs entwickelte sich eine Idee: Wäre es nicht auch möglich, die Position der color stops Pixel zu definieren? Damit sollten die color stops auch bei verschieden hohen Verläufen an der selben Position stehen. Gesagt, getan:

background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 98px,rgba(0,0,0,0.75) 163px,rgba(0,0,0,0.85) 195px,rgba(0,0,0,0.95) 228px,rgba(0,0,0,1) 293px,rgba(0,0,0,1) 100%);

Wie auf der Demo-Seite ersichtlich ist, funktioniert diese Methode ausgezeichnet und löst das Problem.