mask-image

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La propriété CSS mask-image définit l'image qui sera utilisée comme masque pour un élément.

Par défaut, cela signifie que le canal alpha de l'image du masque sera multiplié par le canal alpha de l'élément. Cette combinaison peut être contrôlée avec la propriété mask-mode.

css
/* Valeur avec un mot-clé */
mask-image: none;

/* Valeur de type <mask-source> */
mask-image: url(masks.svg#mask1);

/* Valeurs de type <image> */
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);

/* Gestion de plusieurs masques */
mask-image: image(url(mask.png), skyblue),
  linear-gradient(rgba(0, 0, 0, 1), transparent);

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

Syntaxe

Valeurs

none

Le masque défini par ce mot-clé sera une image noire transparente.

<mask-source>

Une référence url() vers un masque SVG (<mask>) ou une image CSS.

<image>

Une image utilisée pour le masque.

Définition formelle

Valeur initialenone
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
Valeur calculéecomme spécifié mais avec les valeurs <url> rendues absolues
Type d'animationdiscrète

Syntaxe formelle

mask-image = 
  <mask-reference>#  

<mask-reference> = 
  none           |
  <image>        |
  <mask-source>  

<image> = 
  <url>       |
  <gradient>  

<mask-source> = 
  <url>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Exemples

Définir une image de masque avec une URL

Spécifications

Specification
CSS Masking Module Level 1
# the-mask-image

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi