Bei der CSS-Maskierung können Sie ein Bild als Maskenebene verwenden. Das bedeutet, dass Sie ein Bild, eine SVG oder einen Farbverlauf als Maske verwenden können, um interessante Effekte ohne einen Bildeditor zu erzeugen.
Wenn Sie mit der Eigenschaft clip-path ein Element ausschneiden, wird der beschnittene Bereich unsichtbar.
Wenn Sie stattdessen einen Teil des Bildes opak machen oder einen anderen Effekt darauf anwenden möchten, müssen Sie eine Maskierung verwenden.
In diesem Beitrag wird die Verwendung der mask-image-Eigenschaft in CSS erläutert.
mit dem 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 standardmäßige CSS-Maskierungseigenschaft nur teilweise.
Du musst das Präfix -webkit- zusätzlich zum Standardattribut verwenden, um die beste Browserkompatibilität zu erzielen.
Kann ich CSS-Masken verwenden?
Die Verwendung des Präfix-Attributs ist zwar gut,
Wenn Sie Masken verwenden, um Text über einem Bild sichtbar zu machen, müssen Sie berücksichtigen, was passiert, wenn die Maskierung nicht verfügbar ist.
Es kann sich lohnen, Funktionsabfragen zu verwenden, um Unterstützung für mask-image oder -webkit-mask-image zu ermitteln
und stellen Sie ein lesbares Fallback bereit, 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 Image zu übergeben.
Das Maskenbild muss einen transparenten oder halbtransparenten Bereich haben.
Ein vollständig transparenter Bereich hat zur Folge, dass der darunter liegende Teil des Bilds unsichtbar ist. Wenn Sie einen halbtransparenten Bereich verwenden, ist ein Teil des Originalbildes sichtbar. Den Unterschied siehst du unten am Glitch. Das erste Bild ist das Originalbild der Info-Pop-ups 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 Farbverlaufstransparenz.
In diesem Beispiel verwende ich auch die Eigenschaft mask-size mit dem Wert cover.
Dieses Attribut funktioniert genauso wie background-size.
Sie können die Keywords cover und contain verwenden oder dem Hintergrund eine Größe mit einer beliebigen gültigen Längeneinheit oder einem Prozentsatz zuweisen.
Sie können Ihre Maske genauso wiederholen wie ein Hintergrundbild, um ein kleines Bild als sich wiederholendes Muster zu verwenden.
Maskierung mit SVG
Statt eine Bilddatei als Maske zu verwenden, können Sie 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 und nicht nur auf ein Bild angewendet werden kann. Leider ist Firefox der einzige Browser, der diesen Ansatz unterstützt.
Es geht jedoch nicht alles verloren, wie es beim Maskieren eines Bildes der Fall ist, können wir das Bild in die SVG-Datei einfügen.
Maskieren mit einem Farbverlauf
Die Verwendung eines CSS-Farbverlaufs als Maske ist eine elegante Möglichkeit, einen maskierten Bereich zu erhalten, ohne ein Bild oder eine SVG-Datei erstellen zu müssen.
Ein einfacher linearer Farbverlauf als Maske kann beispielsweise dafür sorgen, dass der untere Teil eines Bildes unter einer Bildunterschrift nicht zu dunkel wird.
Sie können jeden der unterstützten Farbverlaufstypen 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 der Bildunterschrift beleuchtet wird.
Mehrere Masken verwenden
Wie bei Hintergrundbildern können Sie mehrere Maskenquellen angeben, 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. Dafür werden in der Regel mehrere Hintergrundbilder verwendet und die Bilder können einfach in eine Maske übersetzt werden.
In diesem Artikel habe ich 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;
Um dieses oder ein anderes Muster für Hintergrundbilder in eine Maske umzuwandeln,
ersetzen Sie die background-*-Properties durch die relevanten mask-Properties.
einschließlich der -webkit-Präfixe.
-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 lassen sich einige sehr schöne Effekte erzielen. Du kannst einen Remix des Glitch-Codes erstellen und andere Varianten testen.
Neben dem Erstellen von Clips Mit CSS-Masken können Sie Bilder und andere HTML-Elemente interessanter gestalten, ohne eine Grafikanwendung verwenden zu müssen.
Foto von Julio Rionaldo bei Unsplash