mask

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size

Syntaxe

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

/* Valeurs de 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 positionné à 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 */

/* Masques multiples */
mask:
  url("masks.svg#star") left / 16px repeat-y,
  /* Masque de 16px de large sur le côté gauche */ url("masks.svg#circle")
    right / 16px repeat-y; /* Masque de 16px de large sur le côté droit */

/* Valeurs globales */
mask: inherit;
mask: initial;
mask: revert;
mask: revert-layer;
mask: unset;

Valeurs

<mask-layer>

Une ou plusieurs couches de masque séparées par des virgules, composées des éléments suivants :

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

Description

La propriété raccourcie mask applique un masque sur une partie ou la totalité de l'élément auquel elle est appliquée. Les parties de l'élément qui ont un masque, visibles ou partiellement affichées dépendent soit de l'opacité (canal alpha du masque), soit de la luminosité (luminance) du masque. En masquage alpha, les zones opaques du masque révèlent l'élément, et les zones transparentes le masquent. En masquage luminance, les zones claires et opaques du masque révèlent l'élément, et les zones sombres ou transparentes le masquent.

Bien que toutes les propriétés constitutives du masque ne doivent pas être déclarées, toute valeur omise prendra sa valeur initiale, qui est :

mask-image: none;
mask-mode: match-source;
mask-position: 0% 0%;
mask-size: auto;
mask-repeat: repeat;
mask-origin: border-box;
mask-clip: border-box;
mask-composite: add;

Dans chaque <mask-layer>, la composante mask-size doit être placée après la valeur mask-position, séparée par une barre oblique (/).

Si deux valeurs <geometry-box> sont présentes, la première est la valeur de mask-origin, la seconde celle de mask-clip. Si une valeur <geometry-box> et le mot-clé no-clip sont présents, <geometry-box> est la valeur de la propriété mask-origin, car no-clip n'est valide que pour la propriété mask-clip. Dans ce cas, l'ordre des deux valeurs n'a pas d'importance. Si une seule valeur <geometry-box> est présente (sans mot-clé no-clip défini), cette valeur est utilisée pour mask-origin et mask-clip.

Comme la propriété raccourcie mask réinitialise toutes les propriétés mask-border-* à leur valeur initial, vous devez déclarer ces propriétés — ou la propriété raccourcie mask-border — après toute déclaration de mask. Lorsque vous définissez mask dans votre bloc de déclaration, vous définissez aussi implicitement les propriétés suivantes :

mask-border-source: none;
mask-border-mode: alpha;
mask-border-outset: 0;
mask-border-repeat: stretch;
mask-border-slice: 0;
mask-border-width: auto;

Pour cette raison, la spécification recommande d'utiliser la propriété raccourcie mask plutôt que les propriétés individuelles pour remplacer tout masque défini plus tôt dans la cascade. Cela garantit que mask-border a également été réinitialisé.

Définition formelle

Syntaxe formelle

mask = 
  <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> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x           |
  repeat-y           |
  repeat-block       |
  repeat-inline      |
  <repetition>{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()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<mask-source> = 
  <url>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<length-percentage> = 
  <length>      |
  <percentage>  

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

<shape-box> = 
  <visual-box>     |
  margin-box       |
  half-border-box  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Exemples

Appliquez un masque à une image

Dans cet exemple, un masque est appliqué à une image à l'aide d'un dégradé conique répété généré en CSS comme source de masque. Nous montrons également le dégradé comme image d'arrière-plan pour comparaison.

HTML

Nous incluons un élément HTML <img> et un élément HTML <div> vide.

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Drapeau des fiertés" />
<div></div>

CSS

Nous appliquons les mêmes valeurs border, padding et dimensions sur <img> et <div>.

img,
div {
  border: 20px dashed rebeccapurple;
  box-sizing: content-box;
  padding: 20px;
  height: 220px;
  width: 220px;
}

Nous appliquons ensuite un masque à l'élément <img>. La propriété mask-image est générée à l'aide de la fonction repeating-conic-gradient(). Nous définissons un dégradé de 100px par 100px, qui se répète à partir du coin supérieur gauche de la content-box de l'image. Nous incluons deux valeurs <geometry-box> ; la première définit la valeur de mask-origin et la seconde celle de la propriété mask-clip. Le dégradé va du transparent au solide lightgreen. Nous avons utilisé lightgreen pour montrer que ce n'est pas la couleur du masque qui importe, mais sa transparence.

img {
  mask: repeating-radial-gradient(
      circle,
      transparent 0 5px,
      lightgreen 15px 20px
    )
    content-box border-box 0% 0% / 100px 100px repeat;
}

Enfin, nous utilisons la même valeur pour la propriété raccourcie background de l'élément <div>, comme pour le mask.

div {
  background: repeating-radial-gradient(
      circle,
      transparent 0 5px,
      lightgreen 15px 20px
    )
    content-box border-box 0% 0% / 100px 100px repeat;
}

Résultats

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété clip-path
• La propriété filter
• Introduction au masquage CSS
• Propriétés CSS mask
• Déclarer plusieurs masques
• Le module d'application de masque CSS
• L'attribut SVG mask
• Appliquer des effets SVG à du contenu HTML