Lastnost mask-image

Lastnost mask-image omogoča nastavitev slike, ki bo uporabljena kot maska za element. Maska določa, kateri deli elementa bodo vidni in kateri skriti. Kot masko je mogoče uporabiti SVG, PNG slike ali gradienti.

Sintaksa

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

Vrednosti

Vrednost	Opis
`none`	Onemogoči maskiranje (privzeta vrednost).
`url()`	Pot do slike-maske (SVG, PNG).
`linear-gradient()`	Linearni gradient kot maska.
`radial-gradient()`	Radialni gradient kot maska.

Primer . Uporaba SVG kot maske

Nanesemo SVG-sliko srčka kot masko na sliko:

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

Primer . Uporaba gradienta kot maske

Uporabimo linearni gradient kot masko za element:

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

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

Primer . Uporaba SVG-elementa kot maske

Ustvarimo masko s pomočjo SVG-elementa in jo uporabimo za sliko:

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

Glejte tudi

lastnost mask-position,
določa položaj maske glede na element
lastnost mask-size,
določa velikost maske
lastnost mask-repeat,
določa ponavljanje maske
lastnost mask-mode,
določa, kako maska interagira z ozadjem
lastnost mask,
okrajšava za vse lastnosti maskiranja