Mask-image - Propriété CSS

Schéma de la syntaxe de mask-image.

Description des termes utilisés sur le schéma :

• url est le chemin vers un fichier image.
• image est une image, définie avec l'une des fonctions suivantes : url(), image(), image-set(), cross-fade(), stripes(), element().
• gradient est un dégradé de couleurs obtenu avec l'une des fonctions conic-gradient(), linear-gradient(), radial-gradient(), repeating-conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient().
• Plusieurs masques peuvent être définis en répétant les syntaxes séparées par des virgules.

Description de la propriété mask-image.

Le masquage est une technique (relativement récente) qui consiste à cacher certaines parties d'un élément en fonction d'un autre élément, qui est le plus souvent une image.

La propriété mask-image définit le ou les masques à utiliser pour masquer l'élément. Le masque peut être une image, un dégradé ou un fichier SVG.

Reportez-vous à la propriété raccourcie mask pour plus de précisions sur la technique de masquage.

Valeurs pour mask-image.

• mask-image: none;

  Aucun masque n'est appliqué à l'élément : ce dernier est donc visible en entier.

• mask-image: url('chemin/fichier'); mask-image: image('chemin/fichier');

  Ces deux fonctions définissent le chemin d'accès et le nom de fichier du masque. Ce dernier peut être une image ou un fichier SVG.

  Reportez-vous éventuellement à la description des fonctions url() et image().

• mask-image: linear-gradient(...); mask-image: radial-gradient(...); mask-image: conic-gradient(...);

  Dans ces syntaxes, le masque est spécifié par un dégradé de couleurs, défini par l'une des fonctions de dégradé.

  Pour davantage de précision sur la syntaxe des fonctions de dégradé, reportez-vous à la description de ces fonctions : linear-gradient(), radial-gradient() et conic-gradient().

• mask-image: url(...), url(...);

  Combinaison de plusieurs masques. Les différents masques sont séparés par des virgules. Toutes les syntaxes valides pour un masque unique (image, dégradé, fichier SVG) peuvent être utilisées dans cette syntaxe à plusieurs masques.

  Pour davantage de précisions et des exemples, reportez-vous à la page sur les masques multiples.

• mask-image: initial; (none) mask-image: inherit; mask-image: revert; mask-image: revertLayer; mask-image: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de mask-image.

L'animation de mask-image peut donner des effets sympathiques, surtout sur Chrome ou Edge, qui appliquent en effet de fondu lors du passage d'un masque à l'autre.

Compatibilité des navigateurs avec mask-image.

Les techniques de masquage et la propriété sont maintenant bien prises en charge par les navigateurs actuels.

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-image

Estimation de la prise en charge globale.

92%

95%

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-image

• Module CSS - Masquage - Niveau 1

  Introduction des techniques de masquage par image. Et première définition de la propriété résumée mask.
  

  15 Novembre 2012

  Document de travail.

  

  26 Août 2014

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des techniques de masquage.

La spécification qui regroupe tout ce qui concerne le masquage s'appelle CSS Masking Module (Module CSS - Masquage). La propriété mask-image et les propriétés ci-dessous sont présentées dans ce module :

Propriétés :