Eigenschap mask-image

De eigenschap mask-image maakt het mogelijk een afbeelding in te stellen die zal worden gebruikt als masker voor een element. Het masker bepaalt welke delen van het element zichtbaar zullen zijn en welke verborgen. Als masker kunnen SVG, PNG afbeeldingen of verlopen worden gebruikt.

Syntaxis

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

Waarden

Waarde	Beschrijving
`none`	Schakelt maskeren uit (standaardwaarde).
`url()`	Pad naar de maskerafbeelding (SVG, PNG).
`linear-gradient()`	Lineair verloop als masker.
`radial-gradient()`	Radiaal verloop als masker.

Voorbeeld . SVG gebruiken als masker

Laten we een SVG-afbeelding van een hartje als masker op een afbeelding aanbrengen:

<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;
}

Voorbeeld . Een verloop gebruiken als masker

Passen we een lineair verloop toe als masker voor een element:

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

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

Voorbeeld . Een SVG-element gebruiken als masker

Laten we een masker maken met behulp van een SVG-element en dit toepassen op een afbeelding:

<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;
}

Zie ook

eigenschap mask-position,
bepaalt de positie van het masker ten opzichte van het element
eigenschap mask-size,
bepaalt de grootte van het masker
eigenschap mask-repeat,
bepaalt de herhaling van het masker
eigenschap mask-mode,
bepaalt hoe het masker interactie heeft met de achtergrond
eigenschap mask,
afkorting voor alle maskeringseigenschappen