Свойство 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,
съкращение за всички свойства за маскиране
