Paradies Für Designer Und Entwickler

So zeigen Sie Text im Bild mit CSS3 Mix-Blend-Modus

Bildhintergründe sehen hinter großen Displaytexten gut aus. Die Implementierung von CSS ist jedoch nicht so einfach. Wir können den background-clip: text; Eigenschaft, jedoch ist es immer noch eine experimentelle Funktion ohne ausreichende Browserunterstützung.

Die CSS-Alternative zum Anzeigen eines Bildhintergrunds hinter einem Text verwendet die Eigenschaft mix-blend-mode . Mischmodi für HTML-Elemente werden von allen modernen Desktop- und mobilen Browsern mit Ausnahme von einigen, wie dem Internet Explorer, ziemlich unterstützt.

In diesem Beitrag werden wir sehen, wie der mix-blend-mode (zwei seiner Modi) funktioniert und wie Sie ihn verwenden können, um einen Text mit Bildhintergrund in zwei Anwendungsfällen anzuzeigen :

wenn das Hintergrundbild durch den Text gesehen werden kann
wenn das Hintergrundbild um den Text herumläuft

Sehen Sie sich einige Beispiele in der folgenden Demo an (Bilder stammen von unsplash.com).

Die CSS-Eigenschaft für den mix-blend-mode legt fest, wie der Inhalt und der Hintergrund eines HTML-Elements farblich ineinander übergehen sollen .

Werfen Sie einen Blick auf die Liste der Füllmethoden, von denen wir multiply und screen in diesem Beitrag verwenden werden.

Lassen Sie uns zunächst untersuchen, wie diese beiden spezifischen Mischmodi funktionieren.

Wie funktionieren `multiply` und `screen` ?

Füllmethoden sind Funktionen, die einen endgültigen Farbwert anhand der Farbkomponenten eines Elements und seines Hintergrunds berechnen .

Der `multiply` Mischmodus

Im multiply Blend-Modus werden die einzelnen Farben der Elemente und deren Hintergründe multipliziert, und die resultierende Farbe wird auf die endgültige Blended-Version angewendet.

Der multiply Blend-Modus wird gemäß der folgenden Formel berechnet:

B(Cb, Cs) = Cb × Cs

Cb : Cb - Farbkomponente des Hintergrunds Cs - Farbkomponente des Quellelements B - Mischfunktion

Wenn Cb und Cs multipliziert werden, ist die resultierende Farbe eine Mischung dieser zwei Farbkomponenten und ist so dunkel wie die dunkelste der beiden Farben .

Um unseren Textbildhintergrund zu erstellen, müssen wir uns auf den Fall konzentrieren, wenn Cs (die Farbkomponente des Quellenelements) entweder schwarz oder weiß ist .

Wenn Cs schwarz ist, ist der Wert 0, die Ausgabefarbe ist auch schwarz, weil Cb × 0 = 0 . Wenn das Element also schwarz gefärbt ist, spielt es keine Rolle, welche Farbe der Hintergrund hat . Alles, was wir nach dem Mischen sehen können, ist schwarz.

Wenn Cs weiß ist, ist sein Wert 1, die Ausgabefarbe ist was auch immer Cb ist, weil Cb × 1 = Cb . In diesem Fall sehen wir den Hintergrund direkt so wie er ist .

Der `screen` Mischmodus

Der screen funktioniert ähnlich wie der multiply, jedoch mit dem entgegengesetzten Ergebnis . So zeigt ein schwarzer Vordergrund den Hintergrund wie er ist, und ein weißer Vordergrund zeigt Weiß mit jedem Hintergrund.

Lassen Sie uns schnell seine Formel sehen:

B(Cb, Cs) = Cb + Cs - (Cb × Cs)

Wenn Cs schwarz ist (0), wird die Hintergrundfarbe nach dem Überblenden angezeigt:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

Wenn Cs weiß ist (1), ist das Ergebnis weiß mit jedem Hintergrund, wie:

Cb + 1 -(Cb × 1) = Cb + 1 - Cb = 1

1. Bild durch Text gezeigt

Um Text anzuzeigen, der durch sein Hintergrundbild zeigt, verwenden wir den screen mit schwarzem Text und weißem Umgebungsraum .

Wasser

 .backdrop {Breite: 600px; Höhe: 210px; Hintergrundbild: URL (someimage.jpg); Hintergrundgröße: 100%; Rand: Automatisch; } .text {Farbe: schwarz; Hintergrundfarbe: weiß; Mix-Blend-Modus: Bildschirm; Breite: 100%; Höhe: 100%; Schriftgröße: 160pt; Schrift: fett; Textausrichtung: Mitte; Zeilenhöhe: 210px; Rand: 0; }

Derzeit sieht unser Text wie folgt aus, im nächsten Schritt fügen wir dem Hintergrund eine benutzerdefinierte Farbe hinzu.

Hinzufügen von Farbe

Wie Sie vielleicht schon erraten haben, lassen uns die Verwendung von Überblendungsmodi nur zwei Farboptionen für den Bereich, der den Text umgibt, schwarz oder weiß . Bei Weiß ist es jedoch möglich, mit einer Überlagerung etwas Farbe hinzuzufügen, wenn die Überlagerungsfarbe gut mit dem verwendeten Bild übereinstimmt .

Um der Umgebung Farbe hinzuzufügen, fügen Sie a hinzu

zum HTML für eine Überlagerung, und geben Sie ihm eine Hintergrundfarbe mit hoher Transparenz . Verwenden Sie auch die mix-blend-mode: multiply Eigenschaft für das Overlay, da es dabei hilft, die Hintergrundfarbe des Overlays etwas besser mit dem Bild im Text zu verschmelzen .

Wasser

 .überlag {Hintergrundfarbe: rgba (0, 255, 255, .1); Mix-Blend-Modus: Multiplizieren; Breite: 100%; Höhe: 100%; Position: absolut; oben: 0; }

Mit dieser Technik können wir die Umgebung um den Text mit dem Bildhintergrund färben:

Beachten Sie, dass die Technik nur mit subtilen transparenten Farben funktioniert. Wenn Sie eine vollständig deckende Farbe oder eine Farbe verwenden, die nicht mit dem Bild übereinstimmt, wird das Bild, das im Text erscheint, eine sehr sichtbare Tönung der verwendeten Farbe haben. Vermeiden Sie es also, wenn es sich nicht um ein Aussehen handelt opake Farben .

2. Text umgeben von Bildhintergrund

Auch wenn eine normale Textplatzierung über einen Bildhintergrund die gleiche Technik erfordert, werde ich Ihnen ein Beispiel zeigen, wie die obige Demo aussieht, wenn der Effekt umgekehrt wird, dh wenn die Textfarbe weiß und der Hintergrund schwarz ist.

 .text {Farbe: weiß; Hintergrundfarbe: schwarz; Mix-Blend-Modus: Bildschirm; Breite: 100%; Höhe: 100%; Schriftgröße: 160pt; Schrift: fett; Textausrichtung: Mitte; Zeilenhöhe: 210px; Rand: 0; }

Sie können das gleiche Overlay verwenden, um dem Text etwas Farbe hinzuzufügen, es sei denn, Sie möchten es weiß halten.

 .überlag {Hintergrundfarbe: rgba (0, 255, 255, .1); Mix-Blend-Modus: Multiplizieren; Breite: 100%; Höhe: 100%; Position: absolut; oben: 0; }

Und unten sehen Sie, wie der umgekehrte Fall aussieht:

Beachten Sie, dass in Internet Explorer oder jedem anderen Browser, der die Eigenschaft für den mix-blend-mode nicht unterstützt, der Bildhintergrund nicht angezeigt wird und der Text schwarz (oder weiß) bleibt.

Firefox Developer Edition: 6 coolste Tools zum Ausprobieren

Firefox Developer Edition ist der einzige Browser, der heute speziell für Entwickler entwickelt wurde. Die Entwicklerwerkzeuge in der Standard Edition erscheinen zuerst in der Entwicklerversion und es gibt Werkzeuge in der Entwickleredition, die in der Standard Edition nicht verfügbar sind und auch nicht.

(Tech- und Design-Tipps)

Wie man das rechte Outsourcing-Team auswählt

Sie können Ihre Zeit sparen, Ihr Projekt aus einer neuen Perspektive betrachten und so als Unternehmen lernen und wachsen, aber wo suchen Sie das richtige Team? Nehmen wir an, Sie haben ein IT-Projekt, aber keine eigene IT-Abteilung. Was sollten Sie bei der Suche nach einem Outsourcing-Unternehmen erwarten und beachten ?

(Tech- und Design-Tipps)

Interessante Artikel