効果
要素のマスク画像の繰り返しを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
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>プレフィックスa mask-repeatユーティリティ md:のようなブレークポイントバリアントを使用して、ユーティリティを適用する場所をmedium medium以上の画面サイズ
<div class="mask-repeat md:mask-repeat-x ..."> <!-- ... --></div>バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。