Propriété mask-image

La propriété mask-image permet de définir une image qui sera utilisée comme masque pour un élément. Le masque détermine quelles parties de l'élément seront visibles et lesquelles seront cachées. Comme masque, on peut utiliser des images SVG, PNG ou des dégradés.

Syntaxe

sélecteur {
	mask-image: none | <image> | <url>;
}

Valeurs

Valeur	Description
`none`	Désactive le masquage (valeur par défaut).
`url()`	Chemin vers l'image masque (SVG, PNG).
`linear-gradient()`	Dégradé linéaire comme masque.
`radial-gradient()`	Dégradé radial comme masque.

Exemple . Utilisation d'un SVG comme masque

Appliquons une image SVG de cœur comme masque sur une image :

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

Exemple . Utilisation d'un dégradé comme masque

Appliquons un dégradé linéaire comme masque pour un élément :

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

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

Exemple . Utilisation d'un élément SVG comme masque

Créeons un masque à l'aide d'un élément SVG et appliquons-le à une image :

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

Voir aussi

propriété mask-position,
définit la position du masque par rapport à l'élément
propriété mask-size,
définit la taille du masque
propriété mask-repeat,
définit la répétition du masque
propriété mask-mode,
définit comment le masque interagit avec l'arrière-plan
propriété mask,
raccourci pour toutes les propriétés de masquage