mask-mode
mask-mode 是用于控制元素遮罩模式的工具类。
快速参考
| 类名 | 样式 |
|---|---|
mask-alpha | mask-mode: alpha; |
mask-luminance | mask-mode: luminance; |
mask-match | mask-mode: match-source; |
示例
基本示例
使用 mask-alpha、mask-luminance 和 mask-match 工具类来控制元素遮罩的模式：
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-alpha 时，遮罩的 不透明度 决定了被遮罩元素的可见性。
响应式设计
在 mask-mode 工具类前加上 md: 等断点变体，以便仅在 中等 屏幕尺寸及以上应用该工具类：
<div class="mask-alpha md:mask-luminance ...">
</div>
了解更多关于变体的使用，请查阅 变体文档。