mask-size

快速参考

示例

填充容器

使用 mask-cover 工具类可以缩放遮罩图像直到它填充遮罩层，如果需要则会裁剪图像：

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

不裁剪地填充

使用 mask-contain 工具类可以将遮罩图像缩放到外边缘，而不会裁剪或拉伸：

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

使用默认大小

使用 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>

了解更多关于变体的使用，请查阅 变体文档。