Својство 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,
кратенка за сите својства на маскирање
