Свойство 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,
сокращение для всех свойств маскирования
