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
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
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 pour iOS | Samsung Internet | |
| Support simple | Chrome
Aucun support
Non
| Edge Support complet 18 | Firefox Support complet 53 | IE Aucun support Non | Opera
Aucun support
Non
| Safari
Aucun support
Non
| 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.
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
SphinxKnight
Dernière mise à jour par :
SphinxKnight,