Propriété mask-image CSS

Page précédente mask-composite
Page suivante mask-mode

Définition et utilisation

mask-image L'attribut est utilisé pour spécifier l'image utilisée comme masque pour l'élément.

Astuce :Les dégradés linéaires et radiaux en CSS peuvent également être utilisés comme images de masque.

Exemple

Exemple 1

Créez un masque pour l'image :

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

Essayez-le vous-même

Exemple 2

Utilisez des dégradés linéaires et radiaux pour créer différentes couches de masque pour les images :

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}

Essayez-le vous-même

Exemple 3

Utilisez l'élément SVG <mask> pour créer un masque pour l'image :

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Essayez-le vous-même

Exemple 4

Utilisez l'élément SVG <mask> pour créer une autre couche de masque pour l'image :

<svg width="600" height="400">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Essayez-le vous-même

Syntaxe CSS

mask-image: none|image|url()|initial|inherit;

Valeur de l'attribut

Valeur	Description
none	Valeur par défaut. Ne pas utiliser d'image de masque.
image	Utilisé comme image de masque.
url()	Référence de l'URL de l'image ou de l'élément SVG <mask>.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit	Inherits this property from its parent element. Voir : inherit.

Détails techniques

Valeur par défaut :	none
Héritabilité :	Non
Création d'animation :	Non pris en charge. Voir :Propriétés liées aux animations.
Version :	Module de masquage CSS niveau 1
Syntaxe JavaScript :	object.style.maskImage="url(star.svg)"