Уласцівасць mask-repeat
Уласцівасць mask-repeat задае спосаб паўтарэння маскі, калі яе памеры меншыя за памеры элемента.
Працуе аналагічна background-repeat,
але ўжываецца да масак.
Сінтаксіс
селектар {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Значэнні
| Значэнне | Апісанне |
|---|---|
repeat |
Маска паўтараецца па абодвух восях (па змаўчанні). |
no-repeat |
Маска не паўтараецца. |
repeat-x |
Маска паўтараецца толькі па гарызанталі. |
repeat-y |
Маска паўтараецца толькі па вертыкалі. |
space |
Маска паўтараецца з роўнымі прамежкамі. |
round |
Маска маштабуецца для раўнамернага запаўнення. |
Прыклад . Без паўтарэння (no-repeat)
Адно сэрцаўка ў цэнтры без паўтарэння:
<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;
}
:
Прыклад . Паўтарэнне па гарызанталі (repeat-x)
Сэрцаўкі паўтараюцца толькі па гарызанталі:
<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;
}
:
Прыклад . Паўтарэнне па вертыкалі (repeat-y)
Сэрцаўкі паўтараюцца толькі па вертыкалі:
<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;
}
:
Прыклад . Паўтарэнне з прамежкамі (space)
Сэрцаўкі раўнамерна размеркаваны з прамежкамі:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Прыклад . Маштабавальнае паўтарэнне (round)
Сэрцаўкі маштабуюцца для раўнамернага запаўнення:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Глядзіце таксама
-
уласцівасць
mask-size,
вызначае памер маскі -
уласцівасць
mask-position,
ўстанаўлівае становішча маскі -
уласцівасць
mask,
скарачэнне для ўсіх уласцівасцяў маскавання
