CSS mask-composite egenskap

Föregående sida mask-clip
Nästa sida mask-image

Definition och användning

mask-composite Egenskapen specificerar den kompositoperation som används mellan den aktuella maskningslagret och det underliggande maskningslagret.

Exempel

Visa mask-composite Olika värden för egenskapen:

.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;
}

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
add	Placera källmaskningslagret ovanpå målmaskningslagret.
subtract	Områden där källmaskningslagret placeras utanför målmaskningslagret.
intersect	Ersätt målmaskningslagret med den del som överlappar källmaskningslagret.
exclude	Sammanfoga områdena där källmaskningslagret och målmaskningslagret inte överlappar.
initial	Sätt detta egenskap till dess standardvärde. Se: initial.
inherit	Får detta egenskap från sin föräldrelement. Se: inherit.

Tekniska detaljer

Standardvärde:	add
Arv:	Nej
Animeringsproduktion:	Stöds inte. Se:Animeringsrelaterade egenskaper.
Version:	CSS Masking Module Level 1
JavaScript-syntax:	object.style.maskComposite="intersect"