mask

La propriété mask permet de modifier la visibilité d'un élément en le masquant partiellement ou complètement. Cela peut fonctionner 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 .

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 :
Animablepour chaque propriété individuelle de la propriété raccourcie :
  • mask-position: oui, comme une liste répétable de , une simple liste de , une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
  • mask-size: oui, comme une liste répétable de , une simple liste de , une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle
Crée un contexte d'empilementoui

Syntaxe

/* 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;

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> <masking-mode>? || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator>


<mask-reference> = none | <image> | <mask-source>
<masking-mode> = alpha | luminance | match-source
<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


<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<mask-source> = <url>
<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>
<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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<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}


<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> [ <percentage> | <length> ]?

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.8ff9d87c82a0.png) 20%;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Masking 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

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple  (uniquement pour SVG) 1.0-webkit[1] (Oui)[2] Pas de support (Oui)-webkit[1] 4.0-webkit[3]
Applicabilité aux éléments HTML 1.0-webkit[1] 3.5 (1.9.1)[1] Pas de support (Oui)-webkit[1] Pas de support
Propriété raccourcie pour les propriétés mask-* 1.0-webkit[1] Pas de support[4] Pas de support (Oui)-webkit[1] Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple  (uniquement pour SVG) 2.1-webkit ? ? ? 3.2-webkit
Applicabilité aux éléments HTML ? ? ? ? ?
Propriété raccourcie pour les propriétés mask-* ? ? ? ? ?

[1] Bien que la propriété soit reconnue, les valeurs appliquées n'ont aucun effet. Il y a également une propriété préfixée avec -webkit qui peut être utilisée pour SVG et HTML avec une syntaxe légèrement différente (qui permet également de définir -webkit-mask-attachment).

[2] À partir de Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), l'espace de couleur par défaut est sRGB, l'espace utilisé avant était linearRGB. Ce changement a donc des impacts sur l'apparence visuelle des masques mais permet à Gecko d'être conforme à la spécification SVG 1.1.

[3] Bien que la propriété soit reconnue, les valeurs appliquées n'ont aucun effet. Il y a également une propriété préfixée avec -webkit qui peut être utilisée pour SVG et HTML avec une syntaxe légèrement différente (qui permet également de définir -webkit-mask-attachment).

[4] La version raccourcie de cette propriété n'est pas implémentée actuellement, cf. bug 1251161.

Voir aussi

Étiquettes et contributeurs liés au document

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