CSS mask-composite eigenschap

Vorige pagina mask-clip
Volgende pagina mask-image

Definitie en gebruik

mask-composite De eigenschap specificeert de compositieoperatie die wordt gebruikt door de huidige maskerlaag en de maskerlaag eronder.

Voorbeeld

Toon mask-composite Verschillende waarden van de eigenschap:

.masked {
  breedte: 200px;
  hoogte: 200px;
  mask-repeat: geen herhaling;
  mask-size: 100%;
  achtergrond: blauw;
  -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;
}

Probeer het zelf uit

CSS Syntax

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

Eigenschapswaarde

Waarde	Beschrijving
add	Het bron masker ligt boven het doel masker.
subtract	Het deel van het bron masker dat buiten het doel masker ligt.
intersect	Het overlappende deel van de bron en doel maskers vervangt het doel masker.
exclude	De gebieden van de bron en doel maskers die niet overlappen, worden samengevoegd.
initial	Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap overnemen van de ouder element. Raadpleeg inherit.

Technische details

Standaardwaarde:	add
Inheritantie:	Nee
Animatieproductie:	Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS Masking Module Level 1
JavaScript Syntax:	object.style.maskComposite="intersect"