Zum Hauptinhalt springen

Wenn Sie einen Artikel mit dem trimmen Clip-Pfad Eigenschaft wird der abgeschnittene Bereich unsichtbar. Wenn Sie stattdessen einen Teil des Bildes undurchsichtig machen oder einen anderen Effekt darauf anwenden möchten, sollten Sie die Maskierung verwenden. Dieser Beitrag erklärt, wie man das benutzt Maskenbild In CSS können Sie ein Bild angeben, das als Maskenebene verwendet werden soll. Dies gibt Ihnen drei Möglichkeiten. Sie können eine Bilddatei als Skin, SVG oder Verlauf verwenden.

Browser-Kompatibilität

Die meisten Browser unterstützen die Standard-CSS-Maskierungseigenschaft nur teilweise. Sie müssen die verwenden -webkit- Präfix zusätzlich zur Standardeigenschaft für beste Browserkompatibilität. Sehen Kann ich CSS-Masken verwenden? Vollständige Informationen zur Browserkompatibilität.

Während die Browserunterstützung für die Standardeigenschaft gut ist, sollten Sie bei der Verwendung der Maskierung, um Text über einem Bild sichtbar zu machen, beachten, was passieren wird, wenn die Maskierung nicht verfügbar ist. Es kann sinnvoll sein, Funktionsabfragen zu verwenden, um die Kompatibilität mit festzustellen Maskenbild oder -webkit-maskenbild
und stellen Sie eine lesbare Sicherung bereit, bevor Sie Ihre maskierte Version hinzufügen.

@supports ( -webkit-mask-image : url ( #mask ) ) oder ( mask-image : url ( #mask ) ) {
}}

Maskieren mit einem Bild

das Maskenbild Die Eigenschaft funktioniert ähnlich wie die Hintergrundbild Eigentum. Benutze einen url () Wert, der in einem Bild übergeben werden soll. Ihr Maskenbild sollte einen transparenten oder halbtransparenten Bereich haben.

Ein vollständig transparenter Bereich macht den Teil des Bildes unter diesem Bereich unsichtbar. Wenn Sie jedoch einen halbtransparenten Bereich verwenden, kann ein Teil des Originalbilds durchscheinen. Sie können den Unterschied in der Panne unten sehen. Das erste Bild ist das Originalbild von Luftballons ohne Maske. Das zweite Bild hat eine Maske mit einem weißen Stern auf einem vollständig transparenten Hintergrund. Das dritte Bild hat einen weißen Stern auf einem Hintergrund mit einer Verlaufstransparenz.

In diesem Beispiel verwende ich auch die Maskengröße Eigentum mit einem Wert von Startseite. Diese Eigenschaft funktioniert genauso wie Hintergrundgröße. Sie können die Schlüsselwörter verwenden Startseite y enthalten oder Sie können die Größe des Hintergrunds mit einer beliebigen gültigen Längeneinheit oder einem Prozentsatz anpassen.

Sie können Ihre Maske auch so wiederholen, wie Sie ein Hintergrundbild wiederholen könnten, um ein kleines Bild als Wiederholungsmuster zu verwenden.

Maskierung mit SVG

Anstatt eine Bilddatei als Skin zu verwenden, können Sie SVG verwenden. Es gibt verschiedene Möglichkeiten, dies zu erreichen. Das erste ist, eine zu haben Element innerhalb der SVG und verweisen Sie auf die ID dieses Elements in der Maskenbild Eigentum.

< 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 " />
Maske >
defs >
svg >

< div class = " container " >
< img src = " balloons.jpg " alt = " Balloons " >
div >

.container img {
Höhe : 100% ;
Breite : 100% ;
Objektanpassung : Abdeckung ;
-webkit-mask-image : url ( #mask ) ;
Maskenbild : URL ( #mask ) ;
}}

svg-mask-3059015

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 ist jedoch nicht alles verloren, da wir für das häufigste Szenario zum Maskieren eines Bildes das Bild in die SVG aufnehmen können.

Maskierung mit einem Farbverlauf

Die Verwendung eines CSS-Verlaufs als Maske ist eine elegante Methode, um einen maskierten Bereich zu erzielen, ohne sich die Mühe machen zu müssen, ein Bild oder eine SVG-Datei zu erstellen.

Ein einfacher linearer Farbverlauf, der als Maske verwendet wird, kann beispielsweise sicherstellen, dass der untere Rand eines Bildes unter einem Titel nicht zu dunkel ist.

Sie können jeden der unterstützten Verlaufstypen verwenden und so kreativ sein, wie Sie möchten. Im folgenden Beispiel wird ein radialer Farbverlauf verwendet, um eine kreisförmige Maske zu erstellen, die hinter dem Titel beleuchtet wird.

Verwenden mehrerer Skins

Wie bei Hintergrundbildern können Sie mehrere Maskenschriftarten 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. Diese verwenden normalerweise mehrere Hintergrundbilder und können daher leicht in eine Maske übersetzt werden.

Als Beispiel fand ich ein schönes Schachbrettmuster in Dieser Beitrag. Der Code mit Hintergrundbildern sieht folgendermaßen aus:

Hintergrundbild :
linearer Gradient ( 45 Grad , #ccc 25% , transparent 25% ) ,
linearer Gradient ( -45 Grad , #ccc 25% , transparent 25% ) ,
linearer Gradient ( 45 Grad , transparent 75% , #ccc 75% ) ,
linearer Gradient ( -45 Grad , transparent 75% , #ccc 75% ) ;
Hintergrundgröße : 20px 20px ;
Hintergrundposition : 0 0 , 0 10px , 10px -10px , -10px 0px ;

Um dieses oder ein anderes Muster für Hintergrundbilder in eine Maske umzuwandeln, müssen Sie das ersetzen Hintergrund- * Eigenschaften mit den relevanten Maske Eigenschaften, einschließlich -webkit die Standard.

-webkit-mask-image :
linearer Gradient ( 45 Grad , #000000 25% , rgba ( 0 , 0 , 0 , 0,2 ) 25% ) ,
linearer Gradient ( -45 Grad , #000000 25% , rgba ( 0 , 0 , 0 , 0,2 ) 25% ) ,
linearer Gradient ( 45 Grad , rgba ( 0 , 0 , 0 , 0,2 ) 75% , #000000 75% ) ,
linearer Gradient ( -45 Grad , rgba ( 0 , 0 , 0 , 0,2 ) 75% , #000000 75% ) ;
-Webkit-Maskengröße : 20px 20px ;
-Webkit-Maskenposition : 0 0 , 0 10px , 10px -10px , -10px 0px ;

Es gibt einige wirklich schöne Effekte, die Farbverlaufsmuster auf Bilder anwenden. Versuchen Sie, den Glitch neu zu mischen, und probieren Sie einige andere Variationen aus.

Neben dem Ausschneiden bieten CSS-Masken eine Möglichkeit, Bilder und andere HTML-Elemente ohne Verwendung einer Grafikanwendung interessanter zu gestalten.

Foto von Julio Rionaldo auf Unsplash.

R Marketing Digital