CSS mask-size eigenschap

Definitie en gebruik

mask-size De eigenschap specificeert de grootte van het maskeringslaagbeeld.

Stel de grootte van het maskeringslaagbeeld in (in procenten):

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

Stel de grootte van het maskeringslaagbeeld in (in pixels):

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 200px 200px;
  mask-repeat: no-repeat;
}

mask-size: auto|size|contain|cover|initial|inherit;

Waarde	Beschrijving
auto	Standaardwaarde.
grootte	Specificeer de grootte van de maskeringsafbeelding, je kunt px, em enz. gebruiken als eenheid, of %.
contain	Zoom de maskeringsafbeelding in zodat de breedte en hoogte passen binnen de container.
cover	Zoom de maskeringsafbeelding in zodat de breedte en hoogte de container kunnen bedekken.
initial	Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap overnemen van de ouderlijke element. Raadpleeg inherit.

Standaardwaarde:	auto
Inheritantie:	Nee
Animatieproductie:	Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS Masking Module Level 1
JavaScript syntaxis:	object.style.maskSize="100px 200px"