CSS mask-repeat eigenschap

Vorige pagina mask-position
Volgende pagina mask-size

Definitie en gebruik

mask-repeat De eigenschap stelt in of het maskerbeeld wordt herhaald en hoe.

Standaard wordt het maskerbeeld zowel horizontaal als verticaal herhaald.

Voorbeeld

Voorbeeld 1

gebruik mask-repeat: no-repeat; en mask-repeat: repeat;:

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

Probeer het zelf

Voorbeeld 2

gebruik mask-repeat: round; en mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

Probeer het zelf

Voorbeeld 3

gebruik mask-repeat: repeat-x; en mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

Probeer het zelf

CSS Syntax

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

Eigenschapswaarde

Waarde	Beschrijving
repeat	Het maskerbeeld wordt zowel horizontaal als verticaal herhaald. Als het laatste beeld niet geschikt is, wordt het geknipt. Dit is de standaardwaarde.
repeat-x	Het maskerbeeld wordt alleen verticaal herhaald.
repeat-y	Het maskerbeeld wordt alleen horizontaal herhaald.
space	Het maskerbeeld wordt zoveel mogelijk herhaald zonder te knippen. Het eerste en laatste beeld worden respectievelijk bevestigd aan de zijkanten van het element, en de witte ruimte tussen de beelden is gelijkmatig verdeeld.
round	Het maskerbeeld wordt herhaald en wordt ge comprimeerd of uitgerekt om de ruimte te vullen (zonder间隙).
no-repeat	Het maskerbeeld wordt niet herhaald. Het beeld wordt slechts een keer weergegeven.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap wordt van de ouderlijke element overgenomen. Raadpleeg inherit.

Technische details

Standaardwaarde:	repeat
Inheritantie:	Nee
Animatieproductie:	Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS Masking Module Level 1
JavaScript Syntax:	object.style.maskRepeat="no-repeat"