CSS mask-composite ominaisuus

Edellinen sivu mask-clip
Seuraava sivu mask-image

Kurssivihjeet:

Näyttö Määrittely ja käyttö

Ominaisuus määrittää nykyisen peitekerroksen ja sen alapuolisen peitekerroksen käyttämän yhdistämistoiminnon.

Esimerkki Näyttö mask-composite

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

}

Kokeile itse

CSS-kieli

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

Ominaisuusarvo	Arvo
Oletusarvo:	Kuvaus
Lähdepeitekerros asetetaan kohdepeitekerroksen päälle.	subtract
Lähdepeitekerros asetetaan kohdepeitekerroksen ulkopuolelle.	intersect
Korvaa kohdepeitekerros lähdepeitekerroksen ja kohdepeitekerroksen päällekkäisellä osalla.	exclude
Aseta tämä ominaisuus sen oletusarvoon. Katso:	Yhdistä lähdepeitekerros ja kohdepeitekerros niiden yhteen osan ulkopuolella. Aseta tämä ominaisuus sen oletusarvoon. Katso:Animointiin liittyvät attribuutit
Periisi vanhemmalta elementiltä tämän ominaisuuden. Katso:	initial Periisi vanhemmalta elementiltä tämän ominaisuuden. Katso:Animointiin liittyvät attribuutit

inherit

Tekninen yksityiskohta	Oletusarvo:
add	Perintä:
Ei	Animaation tekeminen:Ei tuettu. Katso:Animointiin liittyvät attribuutit
.	Versio:
CSS Masking Module Level 1	JavaScript-kieli: