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-composite permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.

/* Valeurs avec un mot-clé*/
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

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

Syntaxe

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

Valeurs

La couche du masque de l'élément est appelée source et les couches inférieures sont appelées destination.

add
La source est placée sur la destination.
subtract
La source est placée lorsque la destination est vide à cet endroit.
intersect
Les endroits de la source qui chevauchent la destination prennent le pas sur la destination.
exclude
Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.The non-overlapping regions of source and destination are combined.

Syntaxe formelle

<compositing-operator>#


<compositing-operator> = add | subtract | intersect | exclude

Exemples

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg), 
                      url(https://mdn.mozillademos.org/files/12676/star.svg); 
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
              url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-size: 100% 100%;
  -webkit-mask-composite: add;
  mask-composite: add; /* peut-être modifiée dans la démo */
}

Spécifications

Spécification État Commentaires
CSS Masking Module Level 1
La définition de 'mask-composite' dans cette spécification.
Candidat au statut de recommandation Définition initiale
Valeur initialeadd
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é
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
mask-composite
Expérimentale
Chrome Aucun support Non
Notes
Aucun support Non
Notes
Notes See also -webkit-mask-composite for a similar non-standard property that uses different keywords.
Edge Support complet 18Firefox Support complet 53IE Aucun support NonOpera Aucun support Non
Notes
Aucun support Non
Notes
Notes See also -webkit-mask-composite for a similar non-standard property that uses different keywords.
Safari Aucun support Non
Notes
Aucun support Non
Notes
Notes See also -webkit-mask-composite for a similar non-standard property that uses different keywords.
WebView Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See also -webkit-mask-composite for a similar non-standard property that uses different keywords.
Chrome Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See also -webkit-mask-composite for a similar non-standard property that uses different keywords.
Firefox Android Support complet 53Opera Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See also -webkit-mask-composite for a similar non-standard property that uses different keywords.
Safari iOS Aucun support Non
Notes
Aucun support Non
Notes
Notes See also -webkit-mask-composite for a similar non-standard property that uses different keywords.
Samsung Internet Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See also -webkit-mask-composite for a similar non-standard property that uses different keywords.

Légende

Support complet  
Support complet
Aucun support  
Aucun support
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.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, lp177
Dernière mise à jour par : SphinxKnight,