Eigenschaft mask-image

Die Eigenschaft mask-image ermöglicht es, ein Bild festzulegen, das als Maske für ein Element verwendet wird. Die Maske bestimmt, welche Teile des Elements sichtbar und welche verborgen sein werden. Als Maske können SVG- und PNG-Bilder oder Gradienten verwendet werden.

Syntax

Selektor {
	mask-image: none | <image> | <url>;
}

Werte

Wert	Beschreibung
`none`	Deaktiviert die Maskierung (Standardwert).
`url()`	Pfad zur Maskenbilddatei (SVG, PNG).
`linear-gradient()`	Linearer Gradient als Maske.
`radial-gradient()`	Radialer Gradient als Maske.

Beispiel . Verwendung von SVG als Maske

Wir wenden ein SVG-Bild eines Herzens als Maske auf ein Bild an:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 300px;
	mask-repeat: no-repeat;
}

Beispiel . Verwendung eines Gradienten als Maske

Wir wenden einen linearen Gradienten als Maske für ein Element an:

<div id="elem"></div>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask-image: linear-gradient(to right, transparent, black);
}

Beispiel . Verwendung eines SVG-Elements als Maske

Wir erstellen eine Maske mit einem SVG-Element und wenden sie auf ein Bild an:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	mask-image: url(#mask);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

Siehe auch

Eigenschaft mask-position,
definiert die Position der Maske relativ zum Element
Eigenschaft mask-size,
definiert die Größe der Maske
Eigenschaft mask-repeat,
definiert die Wiederholung der Maske
Eigenschaft mask-mode,
definiert, wie die Maske mit dem Hintergrund interagiert
Eigenschaft mask,
Kurzform für alle Maskierungseigenschaften