Eigenschap mask-mode

De eigenschap mask-mode stelt de manier in waarop een masker interageert met de achtergrond van een element. Het bepaalt of het masker het alfakanaal (transparantie) of de luminantiewaarden (helderheid) van de maskerafbeelding gebruikt.

Syntaxis

selector {
	mask-mode: alpha | luminance | match-source;
}

Waarden

Waarde	Beschrijving
`alpha`	Het masker gebruikt alleen het alfakanaal (transparantie) van de afbeelding.
`luminance`	Het masker gebruikt de luminantiewaarden van de afbeelding (wit = zichtbaar, zwart = transparant).
`match-source`	Voor afbeeldingen gebruikt het het alfakanaal, voor SVG gebruikt het luminance (standaardwaarde).

Voorbeeld . Alpha-modus

Toepassing van een SVG-masker in alpha-modus:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
	mask-mode: alpha;
}

Voorbeeld . Luminance-modus

Toepassing van een SVG-masker in luminance-modus:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
	mask-mode: luminance;
}

Voorbeeld . SVG-masker met match-source modus

Het gebruik van de standaardwaarde (match-source) voor SVG:

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

#image {
	width: 500px;
	height: 281px;
	mask: url(#svg-mask);
	mask-mode: match-source;
}

Voorbeeld . Compositing met verschillende modi

Combineren van maskers met verschillende overlaymodi:

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat alpha,
		url("arrow.svg") 200px 30px / 150px no-repeat luminance;
	mask-composite: add;
}

Zie ook

eigenschap mask-image,
specificeert de afbeelding voor het masker
eigenschap mask-composite,
bepaalt de interactie van meerdere maskers
eigenschap mask,
shorthand voor alle maskeringseigenschappen