Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

mask-image - Propriété CSS

mask-image

Résumé des caractéristiques de la propriété mask-image

Description rapide
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Statut
Standard
S'applique à
HTML : tous les éléments.
SVG : containers.
Type de valeur
Image | SVG
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété mask-image passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Masquage
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

Description de la propriété mask-image.

Les techniques de masquage et donc la propriété mask-image sont nouvelles et encore partiellement prises en charge par les navigateurs. Vérifiez leur degré de compatibilité avant de les utiliser, et doublez les syntaxes avec -webkit-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.

url est le chemin vers un fichier image.
gradient est un dégradé de couleurs obtenu avec l'une des fonctions CSS de dégradé.
Plusieurs masques peuvent être définis en répétant les syntaxes séparées par une virgule.

mask-image:
 none none url(urlurl(url) image(urlimage(url) gradient gradient , ,
;
  • 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; mask-image: inherit; mask-image: revert; mask-image: revert-layer; mask-image: unset;

    La valeur initiale est : none.

Animation de la propriété 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.

Exemple d'animation avec mask-image

Prise en charge par les navigateurs (compatibilité).

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

Colonne 1
Support par les navigateurs des techniques de masquage, consistant à découper un élément d'après une image ou une forme géométrique.
Colonne 2
Support de la propriété mask-image
1
Masking
2
mask-image
Estimation de la prise en charge en pourcentage du parc actuel.
73%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que mask-image.

Les spécifications CSS éditées par le W3C sont organisées en modules. mask-image fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la partie visible de l'élément (découpage).
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
Définit comment gérer les formes creuses.
Résumé des paramètres de masquage.
Définit tous les paramètres d'un masque pour la bordure d'un élément.
Définit comment le masque doit agir (luminance, alpha).
Définit le décalage éventuel du masque de bordure éventuel par rapport à l'élément.
Définit le mode de répétition du masque.
Définit comment l'image utilisée comme masque doit être découpée.
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
Définit l'épaisseur de la bordure pour l'application d'un masque.
Définit la zone concernée par le masquage.
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
Définit le mode de masquage (couche alpha, luminance...)
Définit la référence pour le positionnement du masque.
Position du masque.
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
Fixe les dimensions du masque.