Eienskap mask-repeat

Die eienskap mask-repeat spesifiseer die manier waarop 'n masker herhaal word as sy afmetings kleiner is as die element se afmetings. Dit werk soortgelyk aan background-repeat, maar word op maskers toegepas.

Sintaksis

cssselekteerder {
  mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

Waardes

Voorbeeld . Sonder herhaling (no-repeat)

Een hartjie in die middel sonder herhaling:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 100px;
  mask-repeat: no-repeat;
}

Результат:

Voorbeeld . Herhaling horisontaal (repeat-x)

Hartjies herhaal slegs horisontaal:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: left center;
  mask-size: 50px;
  mask-repeat: repeat-x;
}

Результат:

Voorbeeld . Herhaling vertikaal (repeat-y)

Hartjies herhaal slegs vertikaal:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center top;
  mask-size: 50px;
  mask-repeat: repeat-y;
}

Результат:

Voorbeeld . Herhaling met tussenposes (space)

Hartjies is gelykmatig versprei met spasies:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-size: 80px;
  mask-repeat: space;
}

Результат:

Voorbeeld . Skaalbare herhaling (round)

Hartjies word geskaal om die area gelyk te vul:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-size: 80px;
  mask-repeat: round;
}

Результат:

Sien ook