La propriété mask permet de masquer un élément partiellement ou complètement en utilisant un masque apposé sur l'image ou en rognant l'image aux positions données. Cette propriété est une propriété raccourcie pour les propriétés mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size et mask-composite .

/* Valeurs avec un mot-clé */
mask: none;

/* Valeurs d'image */
/* Type <image>    */
mask: url(mask.png);                       /* Image matricielle utilisée comme masque */
mask: url(masks.svg#star);                 /* Élément d'un SVG utilisé comme masque */

/* Valeurs combinées */
mask: url(masks.svg#star) luminance;       /* Élément d'un SVG utilisé comme masque de luminance */
mask: url(masks.svg#star) 40px 20px;       /* Élément d'un SVG utilisé comme masque positioné à 40px du haut et 20px de la gauche */
mask: url(masks.svg#star) 0 0/50px 50px;   /* Élément d'un SVG utilisé comme masque avec une hauteur et largeur de 50px */
mask: url(masks.svg#star) repeat-x;        /* Élément d'un SVG utilisé comme masque répété horizontalement */
mask: url(masks.svg#star) stroke-box;      /* Élément d'un SVG utilisé comme masque étendu à la boîte contenu dans le contour */
mask: url(masks.svg#star) exclude;         /* Élément d'un SVG utilisé comme masque et combiné avec l'arrière-plan pour les parties qui ne se chevauchent pas */

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

Note : La propriété raccourcie réinitialise également mask-border avec sa valeur initiale. Il est donc recommandé d'utiliser la propriété raccourcie à travers les feuilles de style plutôt que les propriétés raccourcies (sauf en cas d'héritage complexe).

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments defs et des éléments graphiques
Héritéenon
Pourcentagespour chaque propriété individuelle de la propriété raccourcie :
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • mask-image: comme spécifié mais avec les valeurs url rendues absolues
  • mask-mode: comme spécifié
  • mask-repeat: Deux mots-clés, chacun décrivant une dimension
  • mask-position: Deux mots-clés décrivant l'origine et deux représentant les décalages par rapport à cette origine. Chaque valeur est fournie comme une longueur absolue ou comme un pourcentage.
  • mask-clip: comme spécifié
  • mask-origin: comme spécifié
  • mask-size: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
  • mask-composite: comme spécifié
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniqueselon la grammaire
Crée un contexte d'empilementoui

Syntaxe

Valeurs

<mask-reference>
Cette valeur permet de définir l'image source pour le masque. Voir mask-image.
<masking-mode>
Cette valeur définit le mode du masque. Voir mask-mode.
<position>
Cette valeur définit la position de l'image du masque. Voir mask-position.
<bg-size>
Cette valeur définit la taille de l'image du masque. Voir mask-size.
<repeat-style>
Cette valeur définit le mode de répétition de l'image du masque. Voir mask-repeat.
<geometry-box>
Si une seule valeur <geometry-box> est fournie, elle définira les valeurs de mask-origin et mask-clip. Si deux valeurs sont fournies, la première sera utilisée pour définir mask-origin et la deuxième pour définir mask-clip.
<geometry-box> | no-clip
Cette valeur définit la zone qui est impactée par l'image du masque. Voir mask-clip.
<compositing-operator>
Cette valeur définit l'opération de composition qui est utilisée par rapport à la couche de masque actuelle. Voir mask-composite.

Syntaxe formelle

<mask-layer>#


<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>


<mask-reference> = none | <image> | <mask-source>
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
<compositing-operator> = add | subtract | intersect | exclude
<masking-mode> = alpha | luminance | match-source


<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<mask-source> = <url>
<length-percentage> = <length> | <percentage>
<shape-box> = <box> | margin-box


<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<box> = border-box | padding-box | content-box


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )


<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?

Exemples

HTML

<p class="exemple">Il y avait une table servie sous un arbre devant
 la maison, et le Lièvre y prenait le thé avec le Chapelier. Un Loir
 profondément endormi était assis entre les deux autres qui s’en
 servaient comme d’un coussin, le coude appuyé sur lui et causant 
 par-dessus sa tête.</p>

CSS

.exemple{
  mask:url(https://developer.cdn.mozilla.net/static/img/favicon72.png) luminance 20%;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Masking Module Level 1
La définition de 'mask' dans cette spécification.
Candidat au statut de recommandation Extension aux éléments HTML. La syntaxe est étendue et la propriété devient une propriété raccourcie pour les nouvelles propriétés mask-* définies avec cette spécification.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'mask' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support partiel 1
Notes
Support partiel 1
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Edge Support complet 12Firefox Support complet Oui
Notes
Support complet Oui
Notes
Notes From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification.
IE Aucun support NonOpera Support partiel Partiel
Notes
Support partiel Partiel
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Safari Support partiel 4
Notes
Support partiel 4
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
WebView Android Support complet 2
Support complet 2
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android ? Safari iOS Support complet 3.2
Préfixée
Support complet 3.2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android ?
Applies to HTML elementsChrome Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge ? Firefox Support complet 3.5IE Aucun support NonOpera Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Shorthand for mask-* propertiesChrome Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge ? Firefox Support complet 53IE Aucun support NonOpera Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 53Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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