Vor einiger Zeit wollte ich bei der Entwicklung einer Webseite folgende Grafik einbauen:
Normalerweise ist es mit einem HTML Befehl gemacht, und die Grafik ist drin. Auch mit einem CMS wie zum Beispiel WordPress ist das kein Problem. Doch was macht man, wenn der Flieger immer gleich groß bleiben soll und sich nur der Hintergrund anpassen soll? Dann wird man diese Grafik so nicht verwenden können. Browser können Bilder entweder ganz oder gar nicht skalieren. Möchte man den Hintergrund dynamisch gestalten, muss man diesen mit CSS erzeugen.
In meinem Fall habe ich mir als erstes die Grafik ohne Hintergrund erzeugt.
Als Dateiformat habe ich ein PNG-24 ausgewählt. Somit habe ich die volle Transparenz auch beim Schatten. Als nächstes habe ich mir eine Klasse für den Hintergrund angelegt.
.flieger{
background: #D1DDE5;
}Diese Klasse erzeugt leider nicht das gewünschte Ergebnis, da ich hiermit den kompletten Flieger einfärben würde.
Die Lösung hier ist mit einem Verlauf zu arbeiten. Dafür habe ich den CSS-Befehlt linear-gradient verwendet. Dieser ist wie folgt aufgebaut:
background: linear-gradient(Richtung, Farbpunkt 1, Farbpunkt 2, ...);Setze ich nun insgesamt vier Farbpunkte und zwei davon an der gleichen Stelle erzeuge ich einen harten „Verlauf“.
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(209,221,229,1) 71%, rgba(209,221,229,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(71%, rgba(255,255,255,1)), color-stop(71%, rgba(209,221,229,1)), color-stop(100%, rgba(209,221,229,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(209,221,229,1) 71%, rgba(209,221,229,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(209,221,229,1) 71%, rgba(209,221,229,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(209,221,229,1) 71%, rgba(209,221,229,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(209,221,229,1) 71%, rgba(209,221,229,1) 100%);Wichtig dabei ist, dass die Klasse nicht auf dem Bild liegt. Dann hast Du das gleiche Problem, wie wenn Du die Grafik einzeln einbindest. Die Klasse muss sich am besten auf einem DIV-Container befinden, in welchem das Bild liegt. Dann kannst Du den Container beliebig skalieren.
