mask-size

範例（Examples）

填滿容器（Filling the container）

使用 mask-cover 通用類別來縮放遮罩圖片直到填滿遮罩層，必要時裁剪圖片：

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

填滿但不裁剪（Filling without cropping）

使用 mask-contain 通用類別來將遮罩圖片縮放至外部邊緣，但不裁剪或拉伸：

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

使用預設尺寸（Using the default size）

使用 mask-auto 通用類別來以預設尺寸顯示遮罩圖片：

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

使用自訂值（Using a custom value）

使用 mask-size-[<value>] 語法，根據完全自訂的值來設定 mask image size：

<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() 函式。

響應式設計（Responsive design）

在 mask-size 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

在變體文件中了解更多關於使用變體的資訊。