mask-type

La propriété mask-type définit si un masque sera utilisé comme un masque de luminance ou comme un masque de transparence (aussi appelé masque alpha).

Valeur initiale	`luminance`
Applicabilité	les éléments `<mask>`
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Type d'animation	discrète
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs avec un mot-clé */
mask-type: luminance;
mask-type: alpha;

/* Valeurs globales */
mask-type: inherit;
mask-type: initial;
mask-type: unset;

Valeurs

luminance: Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de luminance. Autrement dit, ce sont les valeurs de luminance relatives qui seront utilisées lorsque le masque sera appliqué.
alpha: Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de transparence. Autrement dit, ce sont les valeurs du canal alpha de l'image qui seront utilisées lorsque le masque sera appliqué.

Syntaxe formelle

luminance | alpha

Exemples

Prenons comme masque le rectangle suivant :

<rect x="10" y="10" width="80" height="80"
    fill="red" fill-opacity="0.7" />

mask

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80"
      fill="red" fill-opacity="0.7"/>
</svg>

Le voici :

Appliquons le à cette boîte :

box

.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
}

<div class="redsquare"></div>

Voici le résultat, si votre navigateur prend en charge cette propriété, avec les deux valeurs de mask-type appliquée à l'élément <mask>, on aura deux carrés différents :

mask-type: alpha; mask-type: luminance;

<div class="redsquare"></div>
<svg version="1.1" xmlns="https://www.w3.org/2000/svg"
    xmlns:xlink="https://www.w3.org/1999/xlink" width="0" height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox"
        style="mask-type:alpha">
      <rect x=".1" y=".1" width=".8" height=".8"
          fill="red" fill-opacity="0.7"/>
    </mask>
  </defs>
</svg>

.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}

<div class="redsquare"></div>
<svg version="1.1" xmlns="https://www.w3.org/2000/svg"
    xmlns:xlink="https://www.w3.org/1999/xlink" width="0" height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox"
        style="mask-type:luminance">
      <rect x=".1" y=".1" width=".8" height=".8"
          fill="red" fill-opacity="0.7"/>
    </mask>
  </defs>
</svg>

.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}

Spécifications

Spécification	État	Commentaires
CSS Masking Level 1 La définition de 'mask-type' dans cette spécification.	Candidat au statut de recommandation	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple (SVG)	24.0	35.0 (35.0)^[1]	Pas de support	15.0	7
Applicabilité aux éléments HTML	Pas de support	35.0 (35.0)^[1]	Pas de support	Pas de support	?

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple (SVG)	?	35.0 (35.0)^[1]	Pas de support	15.0	Pas de support
Applicabilité aux éléments HTML	?	?	?	?	?

[1] Disponible depuis Gecko 20 (Firefox 20.0 / Thunderbird 20.0 / SeaMonkey 2.17) via la propriété layout.css.masking.enabled désactivée par défaut. Cette préférence a été retirée dans Gecko 52 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) (cf. bug 1308239).

Voir aussi

mask