Các tiện ích để kiểm soát sự lặp lại của mask image của một phần tử.
| 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; |
Sử dụng tiện ích mask-repeat để lặp lại mask image cả theo chiều dọc và chiều ngang:
<div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>Sử dụng tiện ích mask-repeat-x để chỉ lặp lại mask image theo chiều ngang:
<div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>Sử dụng tiện ích mask-repeat-y để chỉ lặp lại mask image theo chiều dọc:
<div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>Sử dụng tiện ích mask-repeat-space để lặp lại mask image mà không bị cắt xén:
<div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>Sử dụng tiện ích mask-repeat-round để lặp lại mask image mà không bị cắt xén, kéo giãn nếu cần để tránh khoảng trống:
<div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>Sử dụng tiện ích mask-no-repeat để ngăn mask image lặp lại:
<div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>Prefix a mask-repeat utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="mask-repeat md:mask-repeat-x ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.