mask-mode

Ví dụ

Ví dụ cơ bản

Sử dụng các tiện ích mask-alpha, mask-luminance và mask-match để kiểm soát chế độ mask của một phần tử:

<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>

Khi sử dụng mask-luminance, giá trị độ sáng của mask xác định khả năng hiển thị, vì vậy việc sử dụng các màu grayscale sẽ tạo ra kết quả dễ đoán nhất. Với mask-alpha, độ mờ của mask xác định khả năng hiển thị của phần tử được mask.

Responsive design

Prefix a mask-mode utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="mask-alpha md:mask-luminance ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.