Florence Maurice

Webthemen

Hintergrundbilder mit halbtransparenten Farben überlagern

Geschrieben am: , aktualisiert:

ein Bild normal, das andere mit halbtransparenter Farbe überlagert

Letztens habe ich eine Möglichkeit gesucht, Hintergrundbilder mit einer Farbe zu überlagern. Eigentlich dachte ich, das müsste ganz einfach gehen - aber von Anfang an.

Mit CSS3 sind mehrfache Hintergrundbilder möglich - das zuerst angegebene Bild ist dabei vor dem danach angegebenen Bild platziert.

.beispiel { background-image: url(bild1.jpg), url(bild2.jpg); }

Außerdem gibt es die Möglichkeit, Angaben zu Hintergrundbildern- und Hintergrundfarben hinter der Kurzeigenschaft background zu schreiben:

.beispiel { background: url(bild.jpg) red; }

Bei der Eigenschaft background kann man auch nur eine Farbe festzulegen, dann definiert man damit, dass das Element kein Hintergrundbild, sondern nur eine Farbe haben soll:

.beispiel { background: red; }

Dies sollte sich doch verwenden lassen, wenn man ein Hintergrundbild und eine Farbe kombinieren möchte. Ich wollte, dass eine halbtransparente Farbe über dem Hintergrundbild liegt. Das müsste doch einfach gehen, dachte ich, und versuchte Folgendes:

/* funktioniert nicht */ 
.beispiel { background: rgba(255, 255, 255, 0.5), url(bild.jpg); }

Das funktionierte jedoch überhaupt nicht.

Bei developer.mozilla fand ich dazu folgende Erklärung:

"Note: The background-color can only be defined on the last background, as there is only one background color for the whole element.

Die Hintergrundfarbe kann also nur beim letzten Hintergrund definiert werden, weil es nur eine Hintergrundfarbe für das ganze Element gibt.

Den gewünschten Effekt erreicht man allerdings, indem man ein einfarbiges Hintergrundbild erzeugt, nämlich über CSS3-Farbverläufe. Man braucht einen linearer Farbverlauf, bei dem dieselbe Farbe für den Anfang und den Schluss definiert sind. Folgendermaßen gehts:

.beispiel { 
background:
linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url(bild.jpg);
}

Bild mit Farbe überlagern

(links Originalbild, rechts mit Überlagerung des halbtransparenten weißen Farbverlaufs)

Beispiel live austesten bei JSFiddle.