效果
用于控制如何解释 SVG 遮罩的实用工具。
| 类名 | 样式 |
|---|---|
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 遮罩的不透明度决定被遮罩元素的可见性。
前缀a mask-type 实用工具 使用断点变体，例如 md:，以仅在以下情况下应用该实用工具中等 屏幕尺寸及以上
<mask class="mask-type-alpha md:mask-type-luminance ..."> <!-- ... --></mask>在 变体文档 中了解有关使用变体的更多信息。