Egenskaben mask-image

Egenskaben mask-image giver mulighed for at indstille et billede, der vil blive brugt som maske for et element. Masken definerer, hvilke dele af elementet der vil være synlige, og hvilke der vil være skjulte. Som maske kan man bruge SVG, PNG-billeder eller gradienter.

Syntaks

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

Værdier

Værdi	Beskrivelse
`none`	Deaktiverer maskering (standardværdi).
`url()`	Sti til maskebillede (SVG, PNG).
`linear-gradient()`	Lineær gradient som maske.
`radial-gradient()`	Radial gradient som maske.

Eksempel . Brug af SVG som maske

Påfør et SVG-billede af et hjerte som maske på et billede:

<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 . Brug af gradient som maske

Anvend 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 . Brug af SVG-element som maske

Opret en maske ved hjælp af et SVG-element og anvend den på et billede:

<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å

egenskaben mask-position,
definerer maskens position i forhold til elementet
egenskaben mask-size,
definerer maskens størrelse
egenskaben mask-repeat,
definerer gentagelse af masken
egenskaben mask-mode,
definerer hvordan masken interagerer med baggrunden
egenskaben mask,
forkortelse for alle maskingsegenskaber