de.hideout-lastation.com
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
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.
Einfache und wunderschöne Android Wear Watch Faces
Mit der Veröffentlichung der ersten Android Wear-Uhren haben viele Entwickler damit begonnen, Apps zu veröffentlichen, die mit dem Wearable funktionieren. Zusammen mit Apps, die dem Gerät verschiedene Funktionen zur Verfügung stellen, haben Entwickler Watch Faces veröffentlicht, mit denen Benutzer das Aussehen ihres Wearables anpassen können .In di
15 Wege zur Stärkung Ihrer Privatsphäre in Windows 10
Windows 10 ist aus verschiedenen Gründen beliebt, einschließlich der Kritik an einigen Funktionen, die Ihre Privatsphäre verletzen oder gefährden. Cortana, obwohl manchmal sehr nützlich, sucht zu viele persönliche Informationen über Sie wie jeder andere persönliche digitale Assistent auf dem Markt.Das ist
