Comprendre et utiliser la propriété CSS mask-composite : syntaxe, valeurs, exemples et astuces

Propriété CSS mask-composite

La propriété CSS mask-composite permet de déterminer comment les différentes couches d'un masque d'image doivent être combinées ensemble. Cette propriété est utilisée en conjonction avec la propriété mask pour définir un masque d'image sur un élément.

Syntaxe générale

La syntaxe générale de la propriété mask-composite est la suivante :

  element {
    mask-composite: [value];
  }
  

Valeurs possibles

Les valeurs possibles pour la propriété mask-composite sont :

• add : combine les couches en additionnant leurs valeurs
• subtract : combine les couches en soustraitant la valeur de la couche supérieure de celle de la couche inférieure
• intersect : combine les couches en conservant seulement les parties communes entre les couches
• exclude : combine les couches en conservant les parties qui ne se chevauchent pas

Exemples

Voici un exemple d'utilisation de la propriété mask-composite :

Exemple :      Copier le code

  #element {
    mask: url(mask.png) layer1, url(mask2.png) layer2;
    mask-composite: add;
  }
  

Dans cet exemple, nous définissons deux couches de masque d'image en utilisant la propriété mask. La propriété mask-composite définit ensuite comment ces deux couches doivent être combinées ensemble en utilisant la valeur add.

Conseils et astuces d'utilisation

• Il est important de noter que les navigateurs ne prennent pas en charge la propriété mask-composite de manière uniforme, il est donc important de vérifier la compatibilité avec les navigateurs cibles avant de l'utiliser.
• La valeur add peut être utilisée pour ajouter des détails supplémentaires à un masque d'image existant en utilisant plusieurs couches de masque d'image.
• La valeur subtract peut être utilisée pour enlever des parties d'un masque d'image en utilisant plusieurs couches de masque d'image.
• La valeur intersect peut être utilisée pour créer un masque d'image qui ne montre que les parties communes entre plusieurs couches de masque d'image.
• La valeur exclude peut être utilisée pour créer un masque d'image qui ne montre que les parties qui ne se chevauchent pas entre plusieurs couches de masque d'image.

En utilisant la propriété mask-composite, vous pouvez contrôler de manière plus fine comment les couches de masque d'image doivent être combinées pour créer des effets d'image complexes et personnalisés.

Prise en charge de la propriété dans les navigateurs

Explorateur
Verssion	4 -webkit-	18 -webkit-	53 -webkit-	3.1 -webkit-	15 -webkit-

Valeurs de la propriété css