mask-image

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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

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
Média	visuel
Valeur calculée	comme spécifié mais avec une URI relative convertie en une URI absolue
Type d'animation	discrète
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* 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.0), 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.0), transparent);

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

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 (<mask>) ou une image CSS.
<image>: Une image utilisée pour le masque.

Syntaxe formelle

<mask-reference>#où 
<mask-reference> = none | <image> | <mask-source>
où 
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<mask-source> = <url>
où 
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
où 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
où 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>

Exemples

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}

HTML

<div id="masked"></div>

Spécifications

Spécification	État	Commentaires
CSS Masking Level 1 La définition de 'mask-image' dans cette spécification.	Candidat au statut de recommandation	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari (WebKit)
Support simple	1.0-webkit^[1]	Pas de support^[2]	Pas de support	?	(Oui)-webkit	4.0-webkit^[3]
Gestion de plusieurs masques	1.0-webkit	Pas de support^[2]	Pas de support	?	(Oui)-webkit	4.0-webkit
Masques SVG	8.0	Pas de support^[2]	Pas de support	?	(Oui)-webkit	4.0-webkit

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	2.1-webkit^[4]	Pas de support^[2]	?	Pas de support	3.2-webkit^[5]
Gestion de plusieurs masques	(Oui)-webkit	Pas de support^[2]	?	Pas de support	(Oui)-webkit
Masques SVG	(Oui)-webkit	Pas de support^[2]	?	Pas de support	(Oui)-webkit

[1] Implémentée à partir de la version 8.0, Chrome ne prenait en charge que les gradients préfixés avec -webkit. La prise en charge des versions non préfixées a été ajoutée par la suite.

[2] Cette fonctionnalité n'est pas encore implémentée sur tous les canaux, elle est uniquement disponible pour les canaux Nightly et Dev Edition cf. bug 1251161.

[3] Cette fonctionnalité est implémentée à partir de Safari 4.0. Initialement Safari ne prenait en charge que les gradients préfixés avec -webkit.

[4] Initialement Android ne prenait en charge que les gradients préfixés avec -webkit.

[5] Initialement iOS Safari ne prenait en charge que les gradients préfixés avec -webkit.

mask-image

Syntaxe

Valeurs

Syntaxe formelle

Exemples

CSS

HTML

Spécifications

Compatibilité des navigateurs

Étiquettes et contributeurs liés au document