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
selekteerder {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Waardes
| Waarde | Beskrywing |
|---|---|
repeat |
Masker herhaal op beide asse (verstek). |
no-repeat |
Masker word nie herhaal nie. |
repeat-x |
Masker herhaal slegs horisontaal. |
repeat-y |
Masker herhaal slegs vertikaal. |
space |
Masker herhaal met gelyke tussenposes. |
round |
Masker word geskaal om die area gelyk te vul. |
Voorbeeld . Sonder herhaling (no-repeat)
Een hartjie in die middel sonder herhaling:
<img id="image" src="image.jpg">
#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:
<img id="image" src="image.jpg">
#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:
<img id="image" src="image.jpg">
#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:
<img id="image" src="image.jpg">
#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:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Sien ook
-
eienskap
mask-size,
bepaal die grootte van die masker -
eienskap
mask-position,
stel die posisie van die masker -
eienskap
mask,
verkorte vorm vir alle maskeringseienskappe
