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 initialeluminance
Applicabilitéles éléments <mask>
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'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" />
Le voici :

Appliquons le à cette boîte :

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;

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.

Compatibilité des navigateurs

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

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,