mix-blend-mode für schöne Texteffekte - Bilder und Text mischen (CSS3)
Geschrieben am:
mix-blend-mode
kann man für Texteffekte nutzen, bei denen der Text mit dem Hintergrund verwoben ist.
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.