Propriété mask CSS

Page précédente marker-start
Page suivante mask-clip

Définition et utilisation

mask L'attribut est utilisé pour cacher les éléments par masquage ou découpe d'image (partie ou totalité).

mask L'attribut est une forme abrégée des attributs suivants :

Instance

Exemple 1

Créer une couche de masque pour l'image :

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

Essayez-le vous-même

Exemple 2

Utiliser des gradients linéaires et radiaux pour créer différents masques pour l'image :

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

Essayez-le vous-même

Exemple 3

Utiliser l'élément <mask> SVG pour créer une couche de 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

Utiliser l'élément <mask> SVG pour créer une 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: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Valeur de l'attribut

Valeur	Description
mask-image	Spécifie l'image utilisée comme couche de masquage de l'élément. La valeur par défaut est none.
mask-mode	Spécifie si l'image de couche de masquage doit être traitée comme un masque de luminosité ou un masque alpha. La valeur par défaut est match-source.
mask-repeat	Définit si et comment l'image de masquage répète. La valeur par défaut est repeat.
mask-position	Définit la position de départ de l'image de masquage (par rapport à la zone de position de masquage). La valeur par défaut est 0% 0%.
mask-clip	Spécifie la zone affectée par l'image de masquage. La valeur par défaut est border-box.
mask-origin	Spécifie la position de départ de l'image de couche de masquage (zone de position de masquage). La valeur par défaut est border-box.
mask-size	Spécifie la taille de l'image de couche de masquage. La valeur par défaut est auto.
mask-composite	Spécifie l'opération de composition utilisée entre la couche de masquage actuelle et la couche de masquage inférieure. La valeur par défaut est add.
initial	Règle cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits cette propriété de son élément parent. Voir inherit.

Détails techniques

Valeur par défaut :	none match-source repeat 0% 0% border-box border-box auto add
Héritabilité :	Non
Réalisation des animations :	Non pris en charge. Voir :Propriétés liées aux animations.
Version :	Module de masquage CSS niveau 1
Syntaxe JavaScript :	object.style.mask="url(star.svg)"