Egenskapen mask-image

Egenskapen mask-image lar deg angi et bilde som skal brukes som maske for et element. Masken bestemmer hvilke deler av elementet som skal være synlige, og hvilke som skal være skjulte. Som maske kan du bruke SVG, PNG-bilder eller gradienter.

Syntaks

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

Verdier

Verdi	Beskrivelse
`none`	Deaktiverer maskering (standardverdi).
`url()`	Bane til maskebildet (SVG, PNG).
`linear-gradient()`	Lineær gradient som maske.
`radial-gradient()`	Radial gradient som maske.

Eksempel . Bruk av SVG som maske

La oss legge et SVG-bilde av et hjerte som maske over et bilde:

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

Eksempel . Bruk av gradient som maske

La oss bruke en lineær gradient som maske for et element:

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

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

Eksempel . Bruk av SVG-element som maske

La oss opprette en maske ved hjelp av et SVG-element og bruke den på et bilde:

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

Se også

egenskapen mask-position,
definerer posisjonen til masken i forhold til elementet
egenskapen mask-size,
definerer størrelsen på masken
egenskapen mask-repeat,
definerer repetisjon av masken
egenskapen mask-mode,
definerer hvordan masken samhandler med bakgrunnen
egenskapen mask,
shorthand for alle maskeringsegenskaper