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 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;

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
Médiavisuel
Valeur calculéecomme spécifié mais avec les valeurs url rendues absolues
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

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

Syntaxe formelle

<mask-reference>#


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


<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<mask-source> = <url>


<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()>


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<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> )


<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<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 | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<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 Module Level 1
La définition de 'mask-image' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 1
Préfixée Notes
Support complet 1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes From version 8, Chrome added support for gradient values. Initially, Chrome supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Edge Support complet 16Firefox Support complet 53IE Aucun support NonOpera Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 4
Préfixée Notes
Support complet 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Initially, Safari supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
WebView Android Support complet 2
Préfixée Notes
Support complet 2
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Initially, Android supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 53Opera Android ? Safari iOS Support complet 3.2
Préfixée Notes
Support complet 3.2
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Initially, Safari supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Samsung Internet Android ?
Multiple mask images
Expérimentale
Chrome Support complet 1Edge ? Firefox Support complet 53IE ? Opera Support complet OuiSafari Support complet 4WebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android Support complet 53Opera Android Aucun support NonSafari iOS Support complet OuiSamsung Internet Android ?
SVG masks
Expérimentale
Chrome Support complet 8Edge ? Firefox Support complet 53IE Aucun support NonOpera Support complet OuiSafari Support complet 4WebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android Support complet 53Opera Android Aucun support NonSafari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,