Hintergrundbilder mit halbtransparenten Farben überlagern

Hintergrund 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);
}

Das sollte man natürlich noch durch eine Angabe mit dem -webkit-Präfix doppeln:

.beispiel {
background:
-webkit-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url(bild.jpg);
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)
Was ein bisschen schade an dieser Lösung im Gegensatz zur ursprünglich versuchten ist, ist die Browserunterstützung: Mehrfache Hintergrundbilder funktionieren bereits im IE9, Farbverläufe hingegen erst ab IE 10. Für den IE9 könnte man natürlich auf SVG-Farbverläufe zurückgreifen, die interpretiert er.

Beispiel live austesten bei JSFiddle.

2 Kommentare zu “Hintergrundbilder mit halbtransparenten Farben überlagern”

  1. Axel

    Danke für die Info, hatte gerade genau das selbe Problem ;-.)

    Antworten
    • Florence

      freut mich, wenn mein Beitrag nützt 🙂

      Antworten

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>