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

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

Valeurs

Exemple . Utilisation d'un SVG comme masque

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

html<img id="image" src="image.jpg">

css#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 :

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

css#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 :

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url(#mask);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

Результат:

Voir aussi