Neben background-blend-mode zum Mischen von Hintergründen existiert in CSS3 die Eigenschaft mix-blend-mode. Diese Eigenschaft dient nicht zum Mischen von Hintergründen, sondern zum Vermischen von Eltern- und Kindelementen. So kann man beispielsweise mix-blend-mode für Texteffekte nutzen, bei denen der Text mit dem Hintergrund verwoben ist. Vorweg die Browserunterstützung: mix-blend-mode funktioniert in Firefox ab Version 32. Im Safari ist es ab 7.1 implementiert, in Chrome ab Version 41.
Sehen wir uns ein Beispiel an: Im HTML-Code gibt es ein div-Element, in dem sich ein p-Element befindet:
<div><p></p></div>
Dem div-Element wird ein Muster als Hintergrundbild zugewiesen, beim p-Element sind Hintergrundfarbe und Textfarbe festgelegt. Außerdem – das ist der entscheidende Punkt – wird über mix-blend-mode beim p-Element (Kindelement) festgelegt, wie das Element mit dem Elternelement (div) gemischt werden soll. Gewählt wird hier mix-blend-mode: hard-light;
div {
background: url(pattern_131.gif);
}
p {
background: rgba(0, 255, 51, 1);
color: rgba(25, 34, 248, 0.7);
mix-blend-mode: hard-light;
}
Das Ergebnis:
Im Beispiel wird mix-blend-mode: hard-light; benutzt. Es gibt viele weitere Werte für mix-blend-mode neben dem verwendeten hard-light. Es sind dieselben Werte möglich wie auch bei background-blend-mode, nämlich:
multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Ein kleines Beispiel für die verschiedenen Werte von mix-blend-mode zum Online Ausprobieren – wie gesagt funktioniert es in Firefox ab 32, Safari ab 7.1 oder in Chrome ab 41.
Und hier ein Screenshot des Ergebnisses (eine vergrößerte Ansicht gibt es durch Klick auf das Bild).
