CSS mask-composite egenskab

Forrige side mask-clip
Næste side mask-image

Definition og brug

mask-composite Egenskaben specificerer den synteseoperation, der bruges mellem den aktuelle skjoldingslag og det underliggende skjoldingslag.

Eksempel

Vis mask-composite Forskellige værdier for egenskaben:

.masked {
  bredde: 200px;
  højde: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  baggrund: blå;
  -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;
}

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi	Beskrivelse
add	Kilden placeres over målskærmlaget.
subtract	Det område af kildeskærmlaget, der er placeret uden for målskærmlaget.
intersect	Det overlappende område mellem kilden og målskærmlagene erstattes af målskærmlaget.
exclude	Området mellem kilden og målskærmlagene, der ikke overlapper, kombineres.
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arv denne egenskab fra sin overordnede element. Se: inherit.

Tekniske detaljer

Standardværdi:	add
Arv:	Nej
Animation production:	Ikke understøttet. Se:Animation relaterede egenskaber.
Version:	CSS Masking Module Level 1
JavaScript syntaks:	object.style.maskComposite="intersect"