效果
控制 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.