mask-repeat

mask-repeat 是用于控制元素遮罩图像重复方式的工具类。

快速参考

使用 mask-repeat 工具类可以让遮罩图像在垂直和水平方向上都重复：

<div class="mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

使用 mask-repeat-x 工具类只让遮罩图像在水平方向上重复：

<div class="mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>

使用 mask-repeat-y 工具类只让遮罩图像在垂直方向上重复：

<div class="mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]..."></div>

使用 mask-repeat-space 工具类可以重复遮罩图像而不会裁剪它：

<div class="mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

使用 mask-repeat-round 工具类可以重复遮罩图像，不会裁剪，并根据需要拉伸以避免间隙：

<div class="mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

使用 mask-no-repeat 工具类可以防止遮罩图像重复：

<div class="mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ..."></div>

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

<div class="mask-repeat md:mask-repeat-x ...">
  <!-- ... -->
</div>

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

mask-position

mask-position 是用于控制元素遮罩图像定位的工具类。

mask-size

mask-size 是用于控制元素遮罩图像大小的工具类。