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.

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 canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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

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 Level 1
La définition de 'mask-composite' dans cette spécification.
Candidat au statut de recommandation Définition initiale

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple Pas de support[1] Pas de support[2] Pas de support Pas de support[1] Pas de support[1]
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? Pas de support[1] Pas de support ? ?

[1] WebKit et Blink utilisent une propriété préfixée -webkit-mask-composite qui utilise différents mots-clés.

[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).

Étiquettes et contributeurs liés au document

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