Mask-type - Propriété CSS

Schéma syntaxique de mask-type.

Description de la propriété mask-type.

La technique de masquage consiste à appliquer une image SVG ou png, ou un dégradé sur un élément pour en masquer une partie.

mask-type définit le mode de masquage par défaut d'un masque. Celui-ci peut ensuite être utilisé différemment, mais par défaut on indique si le masque doit opérer via son canal alpha (transparence) ou via sa luminance.

La définition de mask-type ressemble beaucoup à celle de mask-mode mais cela ne fait pas double emploi : mask-type s'applique sur le masque lui-même, tandis que que mask-mode s'applique sur l'élément masqué. En cas de conflit c'est mask-mode qui a le dernier mot. La valeur match-source de mask-mode indique qu'on peut reprendre la valeur par défaut du masque.

Voir aussi mask-mode.

Valeurs pour mask-type.

Voici le masque utilisé dans les exemples ci-dessous. Il est composé de trois rectangle, le premier est presque transparent, le deuxième est blanc et totalement opaque, et le dernier est noir et opaque. Ces rectangles sont superposés.

• mask-type: luminance;

  C'est la luminance qui est utilisé pour masquer. Les zones sombres du masque rendent l'élément masqué plus ou moins transparent, le noir le rendant complément invisible.

  SVG
• mask-type: alpha;

  C'est le canal alpha (la transparence) qui est utilisé pour masquer. Les zones transparentes du masque rendent l'élément invisible. Le degré de transparence du masque joue sur la visibilité de l'élément.
• mask-type: initial; (luminance) mask-type: inherit; mask-type: revert; mask-type: revertLayer; mask-type: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété mask-type.

La propriété mask-type s'anime de façon discrete. Comme il n'y a que deux valeurs possible, l'animation ressemble à un clignotement. Par ailleurs, l'élément masqué à reçu la valeur match-source pour sa propriété mask-mode.

Simulateur avec la propriété mask-type.

Le masque est comparable à celui déjà vu dans le chapitre sur les valeurs : trois triangle superposés. Le premier est presque transparent, le deuxième est blanc et le troisième est noir.

Prise en charge de mask-type par les navigateurs.

Remarques :

(1) Nécessite le préfixe -webkit-. Supporte les propriétés mask-image et mask-box-image mais pas les autres propriétés relatives aux masques.

1

Masquage par
une image

2

Propriété
mask-type

Estimation de la prise en charge globale.

92%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

QQ Browser

1

Baidu Browser

1

Samsung Internet

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Firefox

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la propriété mask-type.

• Module CSS - Masquage - Niveau 1

  Introduction de la propriété mask-type applicable aux masques.
  

  15 Novembre 2012

  Document de travail.

  

  26 Août 2014

  Candidat à la recommandation.

  

  

Voir aussi, à propos des masques.

Le masquage est une technique assez complexe, avec beaucoup de propriétés. celles-ci sont regroupées dans la spécification CSS Masking Module.

Propriétés :