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;

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

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
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 ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 53Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non

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.

Étiquettes et contributeurs liés au document

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