Bei der CSS-Maskierung haben Sie die Möglichkeit, ein Bild als Maskenebene zu verwenden. Das bedeutet, dass Sie ein Bild, eine SVG oder einen Farbverlauf als Maske verwenden können, um auch ohne Bildeditor interessante Effekte zu erzeugen.
Wenn Sie mit der Eigenschaft clip-path ein Element zuschneiden, wird der zugeschnittene Bereich unsichtbar.
Wenn Sie stattdessen einen Teil des Bilds undurchsichtig machen oder einen anderen Effekt darauf anwenden möchten, müssen Sie eine Maskierung verwenden.
In diesem Beitrag wird erläutert, wie Sie die mask-image-Eigenschaft in CSS verwenden, mit der Sie ein Bild angeben können, das als Maskenebene verwendet werden soll.
Sie haben dann drei Möglichkeiten. Sie können eine Bilddatei als Maske, eine SVG-Datei oder einen Farbverlauf verwenden.
Browserkompatibilität
Die meisten Browser unterstützen die Standard-CSS-Maskierungseigenschaft nur teilweise.
Sie müssen das Präfix -webkit- zusätzlich zur Standard-Property verwenden, um die beste Browserkompatibilität zu erzielen.
Vollständige Informationen zur Browserunterstützung finden Sie unter Kann ich CSS-Masken verwenden?.
Die Unterstützung der Verwendung des vorangestellten Attributs ist zwar gut, aber beim Maskieren, um Text über einem Bild sichtbar zu machen, achten Sie darauf, was passiert, wenn die Maskierung nicht verfügbar ist.
Möglicherweise lohnt es sich, Featureabfragen zu verwenden, um die Unterstützung für mask-image oder -webkit-mask-image zu ermitteln und ein lesbares Fallback bereitzustellen, bevor Sie die maskierte Version hinzufügen.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
Mit einem Bild maskieren
Die Eigenschaft mask-image funktioniert ähnlich wie die Eigenschaft background-image.
Verwenden Sie einen url()-Wert, um ein Bild zu übergeben.
Das Maskenbild muss einen transparenten oder halbtransparenten Bereich haben.
Bei einem vollständig transparenten Bereich ist der Teil des Bildes darunter unsichtbar. Bei Verwendung eines halbtransparenten Bereichs ist ein Teil des Originalbilds jedoch durchscheinen lassen. Den Unterschied siehst du unten in der Störungsmeldung. Das erste Bild ist das Originalbild von Ballons ohne Maske. Auf das zweite Bild wurde eine Maske mit einem weißen Stern auf einem vollständig transparenten Hintergrund angewendet. Das dritte Bild hat einen weißen Stern auf einem Hintergrund mit transparentem Farbverlauf.
In diesem Beispiel verwende ich auch die Eigenschaft mask-size mit dem Wert cover.
Diese Eigenschaft funktioniert genauso wie background-size.
Sie können die Keywords cover und contain verwenden oder dem Hintergrund eine Größe mit einer gültigen Längeneinheit oder einem Prozentsatz zuweisen.
Sie können Ihre Maske auch wie ein Hintergrundbild wiederholen, um ein kleines Bild als wiederkehrendes Muster zu verwenden.
Maskierung mit SVG
Anstatt eine Bilddatei als Maske zu verwenden, können Sie auch SVG verwenden.
Dafür gibt es mehrere Möglichkeiten.
Die erste besteht darin, ein <mask>-Element in der SVG zu haben und auf die ID dieses Elements in der mask-image-Eigenschaft zu verweisen.
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Der Vorteil dieses Ansatzes besteht darin, dass die Maske auf jedes HTML-Element angewendet werden kann, nicht nur auf ein Bild. Leider ist Firefox der einzige Browser, der diesen Ansatz unterstützt.
Es geht jedoch nicht alles verloren. Im gebräuchlichsten Szenario zum Maskieren eines Bildes können wir das Bild jedoch in die SVG-Datei aufnehmen.
Maskierung mit Farbverlauf
Die Verwendung eines CSS-Farbverlaufs als Maske ist eine elegante Möglichkeit, einen maskierten Bereich zu verwenden, ohne ein Bild oder SVG erstellen zu müssen.
Ein einfacher linearer Farbverlauf, der als Maske verwendet wird, könnte sicherstellen, dass der untere Teil eines Bildes beispielsweise unter einer Bildunterschrift nicht zu dunkel erscheint.
Sie können alle unterstützten Arten von Farbverlauf verwenden und so kreativ werden, wie Sie möchten. Im nächsten Beispiel wird ein radialer Farbverlauf verwendet, um eine kreisförmige Maske zu erstellen, die hinter dem Untertitel beleuchtet wird.
Mehrere Masken verwenden
Wie bei Hintergrundbildern können Sie mehrere Maskenquellen angeben und diese kombinieren, um den gewünschten Effekt zu erzielen. Dies ist besonders nützlich, wenn Sie ein mit CSS-Verläufen generiertes Muster als Maske verwenden möchten. Für diese Bilder werden in der Regel mehrere Hintergrundbilder verwendet und können daher leicht in eine Maske übersetzt werden.
In diesem Artikel habe ich beispielsweise ein schönes Schachbrettmuster gefunden. Der Code mit Hintergrundbildern sieht wie folgt aus:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Wenn Sie dieses oder ein anderes für Hintergrundbilder vorgesehenes Muster in eine Maske umwandeln möchten, müssen Sie die background-*-Attribute durch die entsprechenden mask-Attribute ersetzen, einschließlich der mit -webkit vorangestellten Attribute.
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Durch die Anwendung von Farbverlaufsmustern auf Bilder können Sie einige sehr schöne Effekte erzielen. Remixe den Glitch und probiere andere Varianten aus.
Zusammen mit dem Beschneiden von CSS-Masken können Sie auch ohne Grafikanwendung Interesse an Bildern und anderen HTML-Elementen wecken.
Foto von Julio Rionaldo auf Unsplash