效果
mask-type
用于控制 SVG 蒙版解释方式的工具。
| 类 | 样式 |
|---|---|
mask-type-alpha | mask-type: alpha; |
mask-type-luminance | mask-type: luminance; |
示例(Examples)
基本示例(Basic example)
使用 mask-type-alpha 和 mask-type-luminance 工具来控制 SVG 遮罩的类型：
🌐 Use the mask-type-alpha and mask-type-luminance utilities to control the type of an SVG mask:
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 遮罩的不透明度决定了被遮罩元素的可见性。
🌐 When using mask-type-luminance the luminance value of the SVG mask determines visibility, so sticking with grayscale colors will produce the most predictable results. With mask-alpha, the opacity of the SVG mask determines the visibility of the masked element.
响应式设计(Responsive design)
在 mask-type 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<mask class="mask-type-alpha md:mask-type-luminance ..."> <!-- ... --></mask>请参阅 变体文档 详细了解如何使用变体。