mask
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é mask
permet de masquer un élément partiellement ou complètement 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).
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 demask-origin
etmask-clip
. Si deux valeurs sont fournies, la première sera utilisée pour définirmask-origin
et la deuxième pour définirmask-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 =
<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> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<bg-size> =
[ <length-percentage [0,∞]> | 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
<masking-mode> =
alpha |
luminance |
match-source
<image> =
<url> |
<gradient>
<mask-source> =
<url>
<length-percentage> =
<length> |
<percentage>
<shape-box> =
<visual-box> |
margin-box
<url> =
<url()> |
<src()>
<visual-box> =
content-box |
padding-box |
border-box
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
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(firefox.png) luminance 20%;
}
Résultat
Spécifications
Specification |
---|
CSS Masking Module Level 1 # the-mask |
Compatibilité des navigateurs
BCD tables only load in the browser