效果
用于控制元素 mask 模式的实用工具。
| 类名 | 样式 |
|---|---|
mask-alpha | mask-mode: alpha; |
mask-luminance | mask-mode: luminance; |
mask-match | mask-mode: match-source; |
使用 mask-alpha、mask-luminance 和 mask-match 实用工具来控制元素 mask 的模式
mask-alpha
mask-luminance
<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>当使用 mask-luminance 时，mask 的亮度值决定可见性，因此坚持使用灰度颜色将产生最可预测的结果。对于 mask-alpha，mask 的不透明度决定被 mask 元素的可见性。
前缀a mask-mode 实用工具 使用像 md: 这样的断点变体，仅在以下情况下应用该实用工具中等 屏幕尺寸及以上
<div class="mask-alpha md:mask-luminance ..."> <!-- ... --></div>了解更多关于在变体文档中使用变体的信息。