mask-composite

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 initiale	`add`
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é
Type d'animation	discrète
Ordre canonique	selon 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>#où 
<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 */
}

HTML

<div id="masked">
</div>
<select id="compositeMode">
  <option value="add">add</option>
  <option value="subtract">subtract</option>
  <option value="intersect">intersect</option>
  <option value="exclude">exclude</option>
</select>

JavaScript

var clipBox = document.getElementById("compositeMode");
clipBox.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskClip = evt.target.value;
});

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

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Edge Mobile	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung 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 18	Firefox Support complet 53	IE Aucun support Non	Opera 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 53	Opera 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.