mask-repeat

用于控制元素遮罩图像如何重复的工具类。

快速参考

类	属性
mask-repeat	mask-repeat: repeat;
mask-no-repeat	mask-repeat: no-repeat;
mask-repeat-x	mask-repeat: repeat-x;
mask-repeat-y	mask-repeat: repeat-y;
mask-repeat-space	mask-repeat: space;
mask-repeat-round	mask-repeat: round;

示例

基础示例

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

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

水平重复

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

<!-- [!code classes: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 工具类只在垂直方向上重复遮罩图像：

<!-- [!code classes: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 工具类重复遮罩图像且不裁剪：

<!-- [!code classes: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 工具类重复遮罩图像且不裁剪，必要时拉伸以避免空隙：

<!-- [!code classes: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 工具类防止遮罩图像重复：

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

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