mask-size

例

コンテナを塗りつぶす

mask-coverユーティリティを使用して、マスク画像がマスクレイヤーを塗りつぶすまで拡大縮小し、必要に応じて画像をトリミングします。

<div class="mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

トリミングせずに塗りつぶす

mask-containユーティリティを使用して、トリミングやストレッチなしにマスク画像を外側のエッジまで拡大縮小します。

<div class="mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

デフォルトサイズの使用

mask-autoユーティリティを使用して、マスク画像をデフォルトサイズで表示します。

<div class="mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

カスタム値の使用

以下を使用してください mask-size-[<value>] 構文 設定するにはマスク画像のサイズ完全にカスタムの値に基づいて

<div class="mask-size-[auto_100px] ...">
  <!-- ... -->
</div>

CSS変数については、以下も使用できます mask-size-(<custom-property>) 構文

<div class="mask-size-(--my-mask-size) ...">
  <!-- ... -->
</div>

これは単なる短縮形です mask-size-[var(<custom-property>)] var()関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa mask-sizeユーティリティ md:のようなブレークポイントバリアントをプレフィックスとして付けて、ユーティリティを適用する対象をmedium 以上の画面サイズのみにします

<div class="mask-auto md:mask-contain ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。