mask-repeat

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ử.

ClassStyles
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;

Ví dụ

Ví dụ cơ bản

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>

Lặp lại theo chiều ngang

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>

Lặp lại theo chiều dọc

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>

Ngăn chặn cắt xén (clipping)

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>

Ngăn chặn cắt xén và khoảng trống

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>

Vô hiệu hóa lặp lại

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>

Responsive design

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.

Copyright © 2025 Tailwind Labs Inc.·Chính sách thương hiệu