Omadus mask-repeat
Omadus mask-repeat määrab maski kordamise viisi, kui selle mõõtmed on väiksemad kui elemendi mõõtmed.
Töötab sarnaselt omadusele background-repeat,
kuid rakendub maskidele.
Süntaks
selektor {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Väärtused
| Väärtus | Kirjeldus |
|---|---|
repeat |
Maski korratakse mööda mõlemat telge (vaikimisi). |
no-repeat |
Maski ei korrata. |
repeat-x |
Maski korratakse ainult horisontaalselt. |
repeat-y |
Maski korratakse ainult vertikaalselt. |
space |
Maski korratakse võrdsete vahedega. |
round |
Maski skaleeritakse ühtlase täitmise saavutamiseks. |
Näide . Kordamata (no-repeat)
Üks süda keskel, kordamata:
<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;
}
:
Näide . Kordamine horisontaalselt (repeat-x)
Südamed korduvad ainult horisontaalselt:
<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;
}
:
Näide . Kordamine vertikaalselt (repeat-y)
Südamed korduvad ainult vertikaalselt:
<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;
}
:
Näide . Kordamine vahedega (space)
Südamed on ühtlaselt jaotatud vahedega:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Näide . Skaleeritav kordamine (round)
Südamed skaleeritakse ühtlase täitmise saavutamiseks:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Vaata ka
-
omadus
mask-size,
määrab maski suuruse -
omadus
mask-position,
määrab maski asukoha -
omadus
mask,
lühivorm kõikidele maskimise omadustele
