Effects
用於控制元素遮罩圖片重複方式的通用類別。
| Class | Styles |
|---|---|
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 通用類別來水平和垂直重複遮罩圖片：
<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>在變體文件中了解更多關於使用變體的資訊。