mask-type

Ví dụ

Ví dụ cơ bản

Sử dụng các tiện ích mask-type-alpha và mask-type-luminance để kiểm soát loại của một mask SVG:

<svg>  <mask id="blob1" class="mask-type-alpha fill-gray-700/70">    <path d="..."></path>  </mask>  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" /></svg><svg>  <mask id="blob2" class="mask-type-luminance fill-gray-700/70">    <path d="..."></path>  </mask>  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" /></svg>

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

Responsive design

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

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

Learn more about using variants in the variants documentation.