Propriété mask-composite CSS

Page précédente mask-clip
Page suivante mask-image

Définition et utilisation

mask-composite Cette propriété spécifie l'opération de composition utilisée par la couche de masquage actuelle et la couche de masquage située sous elle.

Exemple

Exposition mask-composite Différentes valeurs de l'attribut :

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background: blue;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
  mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
}
.mask1 {
  mask-composite: add;
}
.mask2 {
  mask-composite: subtract;
}
.mask3 {
  mask-composite: intersect;
}
.mask4 {
  mask-composite: exclude;
}

Essayer vous-même

Syntaxe CSS

mask-composite: add|subtract|intersect|exclude|initial|inherit;

Valeur de l'attribut

Valeur	Description
add	La couche de masquage source est placée au-dessus de la couche de masquage cible.
subtract	Les parties situées à l'extérieur de la couche de masquage source par rapport à la couche de masquage cible.
intersect	Les parties couvertes par la couche de masquage source et la couche de masquage cible remplacent la couche de masquage cible.
exclude	Les zones non couvertes par la couche de masquage source et la couche de masquage cible sont fusionnées.
initial	Set this property to its default value. See initial.
inherit	Inherited from its parent element. See inherit.

Détails techniques

Valeur par défaut :	add
Héritabilité :	Non
Réalisation des animations :	Non pris en charge. Voir :Propriétés liées aux animations.
Version :	Module de masquage CSS niveau 1
Syntaxe JavaScript :	object.style.maskComposite="intersect"