Eigenschap mask-composite

De eigenschap mask-composite maakt het mogelijk om meerdere maskers die op één element worden toegepast te combineren. Het bepaalt hoe verschillende maskers op elkaar inwerken wanneer ze over elkaar heen worden gelegd.

Syntaxis

selector {
	mask-composite: <compositing-operator>#;
}

Waarden

Waarde	Beschrijving
`add`	Het resultaat is de vereniging van alle maskers (standaard).
`subtract`	Het tweede masker wordt van het eerste afgetrokken.
`intersect`	Alleen het gebied waar de maskers elkaar overlappen wordt weergegeven.
`exclude`	De gebieden die niet gemeenschappelijk zijn voor de maskers worden weergegeven.

Voorbeeld . Modus add

Vereniging van twee maskers (hartje en pijl):

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

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

Voorbeeld . Modus subtract

Aftrekken van de pijl uit het hartje:

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

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		170px 80px;
	mask-size: 
		250px,
		120px;
	mask-repeat: no-repeat;
	mask-composite: subtract;
}

Voorbeeld . Modus intersect

Alleen het overlappingsgebied van de maskers wordt weergegeven:

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

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		50px 30px;
	mask-size: 150px;
	mask-repeat: no-repeat;
	mask-composite: intersect;
}

Voorbeeld . Modus exclude

De gebieden die niet gemeenschappelijk zijn worden weergegeven:

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

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		50px 30px;
	mask-size: 150px;
	mask-repeat: no-repeat;
	mask-composite: exclude;
}

Voorbeeld . Combinatie met gradients

Gebruik met gradientmaskers:

<div id="gradient-box"></div>

#gradient-box {
	width: 400px;
	height: 400px;
	background: linear-gradient(45deg, red, yellow, green, blue);
	mask-image: 
		radial-gradient(circle at 30% 30%, black 40%, transparent 70%),
		radial-gradient(circle at 70% 70%, black 40%, transparent 70%);
	mask-composite: exclude;
}

Zie ook

eigenschap mask-image,
stelt de afbeeldingen voor maskers in
eigenschap mask,
afkorting voor alle maskeringseigenschappen
eigenschap mask-mode,
bepaalt de overvloeimodus van het masker
eigenschap mix-blend-mode,
bepaalt de overvloeimodus van elementen