Vlastnosť mask-repeat
Vlastnosť mask-repeat určuje spôsob opakovania masky, ak sú jej rozmery menšie ako rozmery prvku.
Funguje podobne ako background-repeat,
ale aplikuje sa na masky.
Syntax
selektor {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Hodnoty
| Hodnota | Popis |
|---|---|
repeat |
Maska sa opakuje pozdĺž oboch osí (predvolené). |
no-repeat |
Maska sa neopakuje. |
repeat-x |
Maska sa opakuje iba horizontálne. |
repeat-y |
Maska sa opakuje iba vertikálne. |
space |
Maska sa opakuje s rovnakými medzerami. |
round |
Maska sa škáluje pre rovnomerné vyplnenie. |
Príklad . Bez opakovania (no-repeat)
Jedno srdiečko v strede bez opakovania:
<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;
}
:
Príklad . Opakovanie horizontálne (repeat-x)
Srdiečka sa opakujú iba horizontálne:
<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;
}
:
Príklad . Opakovanie vertikálne (repeat-y)
Srdiečka sa opakujú iba vertikálne:
<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;
}
:
Príklad . Opakovanie s medzerami (space)
Srdiečka sú rovnomerne rozložené s medzerami:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Príklad . Škálovateľné opakovanie (round)
Srdiečka sa škálujú pre rovnomerné vyplnenie:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Pozri tiež
-
vlastnosť
mask-size,
určuje veľkosť masky -
vlastnosť
mask-position,
nastavuje pozíciu masky -
vlastnosť
mask,
skrátený zápis pre všetky vlastnosti maskovania
