CSS mask-modus eigenschap

Definitie en gebruik

mask-mode De eigenschap specificeert of het maskeringsbeeld als helderheidsmasker of alpha-masker moet worden beschouwd.

Maak het maskeringsbeeld als helderheidsmasker zichtbaar:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

mask-mode: match-source|luminance|alpha|initial|inherit;

Waarde	Beschrijving
match-source	Als de mask-image-eigenschap een afbeelding is (afbeeldings-URL of gradient), stel dan mask-mode in op alpha. Als de mask-image-eigenschap een SVG <mask> is, gebruik dan de mask-type-eigenschap van het <mask>-element. Dit is de standaardwaarde.
luminance	Gebruik de helderheidswaarde van het maskeringsbeeld als maskerwaarde.
alpha	Gebruik de alpha-waarde van het maskeringsbeeld als maskerwaarde.
initial	Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap wordt van de ouderlijke element overgenomen. Raadpleeg inherit.

Standaardwaarde:	match-source
Inheritantie:	Nee
Animatieproductie:	Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS Masking Module Level 1
JavaScript syntaxis:	object.style.maskMode="alpha"