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

<!-- [!code classes: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>

在变体文档中了解更多关于使用变体的信息。