效果
用于控制SVG遮罩如何被解释的工具类。
| Class | Styles |
|---|---|
mask-type-alpha | mask-type: alpha; |
mask-type-luminance | mask-type: luminance; |
使用 mask-type-alpha 和 mask-type-luminance 工具类来控制SVG遮罩的类型：
mask-type-alpha
mask-type-luminance
<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>当使用 mask-type-luminance 时，SVG遮罩的亮度值决定可见性，因此使用灰度颜色会产生最可预测的结果。使用 mask-alpha 时，SVG遮罩的不透明度决定被遮罩元素的可见性。
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.