Proprietatea mask-image

Proprietatea mask-image permite setarea unei imagini care va fi utilizată ca mască pentru element. Masca determină care părți ale elementului vor fi vizibile și care vor fi ascunse. Ca mască se pot utiliza imagini SVG, PNG sau gradiente.

Sintaxă

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

Valori

Valoare	Descriere
`none`	Dezactivează mascarea (valoarea implicită).
`url()`	Calea către imaginea-mască (SVG, PNG).
`linear-gradient()`	Gradient liniar ca mască.
`radial-gradient()`	Gradient radial ca mască.

Exemplu . Utilizarea SVG ca mască

Aplicăm o imagine SVG cu forma unei inimi ca mască peste o imagine:

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

Exemplu . Utilizarea gradientului ca mască

Aplicăm un gradient liniar ca mască pentru un element:

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

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

Exemplu . Utilizarea elementului SVG ca mască

Creăm o mască folosind un element SVG și o aplicăm pe o imagine:

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

Vezi și

proprietatea mask-position,
definește poziția măștii relativ la element
proprietatea mask-size,
definește dimensiunea măștii
proprietatea mask-repeat,
definește repetarea măștii
proprietatea mask-mode,
definește cum interacționează masca cu fundalul
proprietatea mask,
prescurtare pentru toate proprietățile de mascare