Wenn Sie einen Artikel mit dem trimmen Clip-Pfad propiedad, el área recortada se vuelve invisible. Si, en cambio, desea hacer que parte de la imagen Sein opaca o aplicarle algún otro efecto, entonces debe usar enmascaramiento. Esta publicación explica cómo usar el Maskenbild im CSS, que le permite especificar una imagen para usar como capa de máscara. Esto le da tres opciones. Puede utilizar un archivo de imagen como máscara, un SVG o un degradiert.
Compatibilidad del Browser
Die meisten von den Browser solo admiten parcialmente la propiedad de enmascaramiento CSS estándar. Necesitará usar el -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-maskenbild: URL(#mask)) oder (Maskenbild: 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. Puedes usar las Schlüsselwörter 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 Breite="0" Höhe="0" viewBox="0 0 400 300">
<defs>
<Maske gehen="Maske">
<rect fill="#000000" x="0" y="0" Breite="400" Höhe="300"></rect>
<Kreis fill="#FFFFFF" cx="150" cy="150" r="100" />
<Kreis fill="#FFFFFF" cx="50" cy="50" r="150" />
</Maske>
</defs>
</svg><div Klasse="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
Höhe: 100%;
Breite: 100%;
object-fit: Startseite;
-webkit-maskenbild: URL(#mask);
Maskenbild: URL(#mask);
}
La ventaja de este enfoque es que la máscara se puede aplicar a cualquier elemento HTML, no solo a una imagen. Desafortunadamente, Firefox es el único navegador que admite este enfoque.
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(45deg, #ccc 25%, transparent 25%),
linearer Gradient(-45deg, #ccc 25%, transparent 25%),
linearer Gradient(45deg, transparent 75%, #ccc 75%),
linearer Gradient(-45deg, transparent 75%, #ccc 75%);
Hintergrundgröße: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, müssen Sie das ersetzen Hintergrund- * Eigenschaften mit den relevanten Maske Eigenschaften, einschließlich -webkit die Standard.
-webkit-maskenbild:
linearer Gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linearer Gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linearer Gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linearer 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;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.
