mask-image Eienskap

Die eienskap mask-image laat jou toe om 'n beeld te spesifiseer wat as 'n masker vir die element gebruik sal word. Die masker bepaal watter dele van die element sigbaar sal wees en watter dele weggesteek sal word. As 'n masker kan jy SVG-, PNG-beelde of gradientse gebruik.

Sintaksis

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

Waardes

Waarde	Beskrywing
`none`	Deaktiveer maskering (verstekwaarde).
`url()`	Pad na die maskerbeeld (SVG, PNG).
`linear-gradient()`	'n Lineêre gradient as masker.
`radial-gradient()`	'n Radiale gradient as masker.

Voorbeeld . Die gebruik van SVG as masker

Laat ons 'n SVG-hartjiebeeld as 'n masker op 'n prent plaas:

<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 . Die gebruik van 'n gradient as masker

Pas 'n lineêre gradient as 'n masker op 'n element toe:

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

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

Voorbeeld . Die gebruik van 'n SVG-element as masker

Skep 'n masker met behulp van 'n SVG-element en pas dit op 'n prent toe:

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

Sien ook

die eienskap mask-position,
bepaal die posisie van die masker relatief tot die element
die eienskap mask-size,
bepaal die grootte van die masker
die eienskap mask-repeat,
bepaal die herhaling van die masker
die eienskap mask-mode,
bepaal hoe die masker met die agtergrond interaksie maak
die eienskap mask,
afkorting vir alle maskeringseienskappe