mask-repeat

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 mask-repeat 工具在垂直和水平方向上重复蒙版图片：

¥Use the mask-repeat utility to repeat the mask image both vertically and horizontally:

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

水平重复(Repeating horizontally)

¥Repeating horizontally

使用 mask-repeat-x 工具仅水平重复遮罩图片：

¥Use the mask-repeat-x utility to only repeat the mask image horizontally:

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

垂直重复(Repeating vertically)

¥Repeating vertically

使用 mask-repeat-y 工具仅垂直重复遮罩图片：

¥Use the mask-repeat-y utility to only repeat the mask image vertically:

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

防止剪切(Preventing clipping)

¥Preventing clipping

使用 mask-repeat-space 工具重复蒙版图片，无需裁剪：

¥Use the mask-repeat-space utility to repeat the mask image without clipping:

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

防止剪切和间隙(Preventing clipping and gaps)

¥Preventing clipping and gaps

使用 mask-repeat-round 工具重复蒙版图片，无需裁剪，如有需要可进行拉伸以避免出现间隙：

¥Use the mask-repeat-round utility to repeat the mask image without clipping, stretching if needed to avoid gaps:

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

禁用重复(Disabling repeating)

¥Disabling repeating

使用 mask-no-repeat 工具防止蒙版图片重复：

¥Use the mask-no-repeat utility to prevent a mask image from repeating:

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

响应式设计(Responsive design)

¥Responsive design

在 mask-repeat 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。