CSS mask-positie eigenschap

Vorige pagina mask-origin
Volgende pagina mask-repeat

Definitie en gebruik

mask-position Eigenschap stelt de startpositie van het maskerbeeld in (ten opzichte van het maskerpositiegebied).

Tip:Standaard wordt de maskerbeeldweergave geplaatst in de linksonderhoek van het element en herhaald in de horizontale en verticale richting.

Voorbeeld

Voorbeeld 1

Stel de positie van het maskerbeeld in op het midden:

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

Probeer het zelf

Voorbeeld 2

Stel de positie van het maskerbeeld in op de rechteronderhoek:

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

Probeer het zelf

CSS syntax

mask-position: waarde;

Eigenschapswaarde

Waarde	Beschrijving
left top left center left bottom right top right center right bottom center top center center center bottom	Als alleen één sleutelwoord wordt opgegeven, wordt de andere waarde "center".
x% y%	De eerste waarde is de horizontale positie, de tweede waarde is de verticale positie. Linksbovenhoek is 0% 0%. Rechteronderhoek is 100% 100%. Als alleen één waarde wordt opgegeven, wordt de andere waarde 50%. Standaardwaarde: 0% 0%
xpos ypos	De eerste waarde is de horizontale positie, de tweede waarde is de verticale positie. Linksbovenhoek is 0 0. De eenheid kan pixels (0px 0px) of elke andere CSS-eenheid zijn. Als alleen één waarde wordt opgegeven, wordt de andere waarde 50%. Mixen van % en positie is mogelijk.
initial	Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap van de ouderweergave erven. Raadpleeg inherit.

Technische details

Standaardwaarde:	0% 0%
Inheritantie:	Nee
Animatieproductie:	Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS Masking Module Level 1
JavaScript syntax:	object.style.maskPosition="100px center"