So zeigen Sie Text im Bild mit dem Mix-Blend-Modus von CSS3 an
Bildhintergründe hinter großen Displaytexten gut aussehen. Die CSS-Implementierung ist jedoch nicht so einfach. Wir können das verwenden Hintergrund-Clip: Text; Diese Eigenschaft ist jedoch immer noch eine experimentelle Funktion ohne ausreichende Browserunterstützung.
Die CSS-Alternative zum Anzeigen eines Bildhintergrunds hinter einem Text ist Verwendung der Mix-Mix-Modus Eigentum. Mischmodi für HTML-Elemente werden von allen modernen Desktop- und mobilen Browsern mit Ausnahme einiger weniger unterstützt, z. B. Internet Explorer.
In diesem Beitrag werden wir sehen, wie Mix-Mix-Modus (zwei seiner Modi speziell) funktioniert und wie man es verwenden kann einen Text mit Bildhintergrund anzeigen in zwei Anwendungsfällen:
- wenn das Hintergrundbild kann gesehen werden durch den Text
- wenn das Hintergrundbild rennt herum der Text
Einige Beispiele in der Demo unten (Bilder von unsplash.com).
Das Mix-Mix-Modus CSS-Eigenschaft legt fest, wie Inhalt und das Hintergrund eines HTML-Elements sollte farblich miteinander vermischen.
Schauen Sie sich die Liste der Mischmodi an, von denen wir verwenden werden multiplizieren und Bildschirm in diesem Beitrag.
Sehen wir uns zunächst an, wie diese beiden spezifischen Mischmodi funktionieren.
Wie multiplizieren & Bildschirm Mischmodi funktionieren
Mischmodi sind technisch gesehen Funktionen Berechnen Sie einen endgültigen Farbwert Verwenden der Farbkomponenten eines Elements und seines Hintergrunds.
Das multiplizieren Mischmodus
In dem multiplizieren Im Mischmodus werden die einzelnen Farben der Elemente und deren Hintergründe angezeigt multipliziert, und die resultierende Farbe wird auf die endgültige gemischte Version angewendet.
Das multiplizieren Der Mischmodus wird nach folgender Formel berechnet:
B (Cb, Cs) = Cb × Cs
woher:Cb - Farbkomponente des HintergrundsCs - Farbkomponente des QuellelementsB - Mischfunktion
Wann Cb und Cs multipliziert werden, ist die resultierende Farbe eine Mischung aus diesen beiden Farbkomponenten und ist so dunkel wie die dunkelste der beiden Farben.
Um unseren Textbildhintergrund zu erstellen, müssen wir uns auf den Fall konzentrieren Cs (die Farbkomponente des Quellelements) ist entweder schwarz oder weiß.
Ob Cs ist schwarz Ihr Wert ist 0, die ausgabefarbe wird auch schwarz sein, weil Cb × 0 = 0. Also, wenn das Element schwarz ist, dann Egal welche Farbe der Hintergrund ist, Alles, was wir nach dem Mischen sehen können, ist schwarz.
Ob Cs ist Weiß Ihr Wert ist 1, Die Ausgabefarbe ist was auch immer Cb DennCb × 1 = Cb. In diesem Fall sehen wir also die Kulisse direkt wie es ist.
Das Bildschirm Mischmodus
Das Bildschirm Der Mischmodus funktioniert ähnlich wie der multiplizieren Mischmodus, aber mit dem entgegengesetzten Ergebnis. Also, a schwarzer Vordergrund zeigt den Hintergrund wie es ist, und ein weißer Vordergrund zeigt Weiß mit welchem Hintergrund auch immer.
Sehen wir uns schnell die Formel an:
B (Cb, Cs) = Cb + Cs - (Cb × Cs)
Wann Cs ist schwarz (0) wird die Hintergrundfarbe nach der Mischung angezeigt:
Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb
Wann Cs ist Weiß (1) Das Ergebnis ist weiß mit einem beliebigen Hintergrund, da:
Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1
1. Bild durch Text dargestellt
Um Text anzuzeigen, der durch sein Hintergrundbild angezeigt wird, verwenden Sie die Bildschirm Mischmodus mit schwarzer Text und weißer umgebender Raum.
Wasser
.Hintergrund Breite: 600px; Höhe: 210px; Hintergrundbild: URL (someimage.jpg); Hintergrundgröße: 100%; Marge: auto; .text color: black; Hintergrundfarbe: weiß; Mix-Mix-Modus: Bildschirm; Breite: 100%; Höhe: 100%; Schriftgröße: 160pt; Schriftgewicht: kühner; Text ausrichten: Mitte; Zeilenhöhe: 210px; Marge: 0;
Derzeit sieht unser Text wie folgt aus. Im nächsten Schritt werden wir dem Hintergrund eine benutzerdefinierte Farbe hinzufügen.
Farbe hinzufügen
Wie Sie vielleicht schon erraten haben, bleiben bei der Verwendung von Mischmodi nur zwei Farboptionen für den Bereich, der den Text umgibt - Schwarz oder weiß. jedoch mit Weiss, Es ist möglich, etwas Farbe hinzuzufügen mit einer Überlagerung, wenn die Überlagerungsfarbe passt gut zu dem verwendeten Bild.
Um der Umgebung Farbe hinzuzufügen, fügen Sie a Wasser Mit dieser Technik können wir die Umgebung des Texts mit dem Bildhintergrund einfärben: Beachten Sie, dass die Technik nur mit gut funktioniert subtile transparente Farben. Wenn Sie eine vollständig undurchsichtige Farbe oder eine Farbe verwenden, die nicht mit dem Bild übereinstimmt, wird das im Text erscheinende Bild einen sehr sichtbaren Farbton der verwendeten Farbe aufweisen. Wenn Sie sich also nicht für einen Look entscheiden, vermeiden Sie undurchsichtige Farben. Obwohl eine normale Textplatzierung über einem Bildhintergrund liegt erfordert die gleiche Technik, Ich werde Ihnen ein Beispiel zeigen, wie die obige Demo aussieht, als Effekt ist umgekehrt, wenn die Textfarbe weiß ist und der Hintergrund schwarz ist. Du kannst den ... benutzen gleiche Überlagerung um dem Text etwas Farbe hinzuzufügen, es sei denn, Sie möchten ihn weiß lassen. Und unten sehen Sie, wie der umgekehrte Fall aussieht: Beachten Sie, dass in Internet Explorer oder einem anderen Browser, der das nicht unterstützt Mix-Blend-Modus: multiplizieren Eigenschaft für die Überlagerung, da diese die Hintergrundfarbe der Überlagerung unterstützt etwas besser mischen wobei das Bild im Text erscheint.
.Überlagerung Hintergrundfarbe: rgba (0,255,255, .1); Mix-Mix-Modus: multiplizieren; Breite: 100%; Höhe: 100%; Position: absolut; oben: 0;
2. Text umgeben von Bildhintergrund
.Text Farbe: Weiß; Hintergrundfarbe: schwarz; Mix-Mix-Modus: Bildschirm; Breite: 100%; Höhe: 100%; Schriftgröße: 160pt; Schriftgewicht: kühner; Text ausrichten: Mitte; Zeilenhöhe: 210px; Marge: 0;
.Überlagerung Hintergrundfarbe: rgba (0,255,255, .1); Mix-Mix-Modus: multiplizieren; Breite: 100%; Höhe: 100%; Position: absolut; oben: 0;
Mix-Mix-Modus wird der Bildhintergrund nicht angezeigt und der Text bleibt schwarz (oder weiß).
