mask-image
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
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( <string> <url-modifier>* ) |
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