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 utilisée comme calque de masque pour un élément, masquant les sections de l'élément sur lesquelles l'image de masquage est définie en fonction du canal alpha de l'image de masque et, selon la valeur de la propriété mask-mode, de la luminosité de l'image de masque.
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: revert-layer;
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 initiale | none |
|---|---|
| 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ée | non |
| Valeur calculée | comme spécifié mais avec les valeurs url() rendues absolues |
| Type d'animation | discrè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
Loading…