oujood.com

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

La propriété CSS mask-composite, incluant la syntaxe générale, les valeurs possibles, des exemples et des astuces d'utilisation.

chercher |

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.

Valeurs par défaut add
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: element.style.maskComposite = "add";

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

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion4 -webkit-18 -webkit-53 -webkit-3.1 -webkit- 15 -webkit-

Valeurs de la propriété css





Voir aussi nos tutoriel :

background-image

Définit l'image de fond d'un élément

dessiner avec php

Dessiner avec PHP la librairie GD

L'instruction throw de javascript

L'instruction throw de js : L'instruction throw vous permet de créer une exception. Si vous utilisez cette commande avec l'instruction try ... catch, vous pouvez contrôler le déroulement du programme et de générer des messages d'erreur précis.