mask-size

用于控制元素遮罩图像尺寸的工具类。

快速参考

类	属性
mask-auto	mask-size: auto;
mask-cover	mask-size: cover;
mask-contain	mask-size: contain;
mask-size-(<custom-property>)	mask-size: var(<custom-property>);
mask-size-[<value>]	mask-size: <value>;

示例

填满容器

使用 mask-cover 工具类缩放遮罩图像直至填满遮罩层，必要时裁剪图像：

<!-- [!code classes:mask-cover] -->
<div class="mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

填满且不裁剪

使用 mask-contain 工具类将遮罩图像缩放到外边缘，既不裁剪也不拉伸：

<!-- [!code classes:mask-contain] -->
<div class="mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

使用默认尺寸

使用 mask-auto 工具类以默认尺寸显示遮罩图像：

<!-- [!code classes:mask-auto] -->
<div class="mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

使用自定义值

使用 mask-size-[<value>] 等工具类，根据完全自定义的值设置遮罩图像尺寸：

<div class="mask-size-[auto_100px] ...">
 <!-- ... -->
</div>

对于 CSS 变量，也可以使用 mask-size-(<custom-property>) 语法：

<div class="mask-size-(--my-mask-size) ...">
 <!-- ... -->
</div>

这只是 mask-size-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

在 mask-size 工具类前加上 md: 等断点变体，即可只在中等屏幕尺寸及以上应用该工具类：

<div class="mask-auto md:mask-contain ...">
 <!-- ... -->
</div>

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