Эффекты
Утилиты для управления повторением изображения маски элемента.
| Class | Styles |
|---|---|
mask-repeat | mask-repeat: repeat; |
mask-no-repeat | mask-repeat: no-repeat; |
mask-repeat-x | mask-repeat: repeat-x; |
mask-repeat-y | mask-repeat: repeat-y; |
mask-repeat-space | mask-repeat: space; |
mask-repeat-round | mask-repeat: round; |
Используйте утилиту mask-repeat для повторения изображения маски как по вертикали, так и по горизонтали:
<div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>Используйте утилиту mask-repeat-x для повторения изображения маски только по горизонтали:
<div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>Используйте утилиту mask-repeat-y для повторения изображения маски только по вертикали:
<div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>Используйте утилиту mask-repeat-space для повторения изображения маски без обрезки:
<div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>Используйте утилиту mask-repeat-round для повторения изображения маски без обрезки, растягивая при необходимости, чтобы избежать промежутков:
<div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>Используйте утилиту mask-no-repeat для предотвращения повторения изображения маски:
<div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>Префикс a mask-repeat утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="mask-repeat md:mask-repeat-x ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.