background-size

範例（Examples）

填滿容器（Filling the container）

使用 bg-cover 通用類別縮放背景圖片直到填滿背景圖層，必要時會裁剪圖片：

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

填滿但不裁剪（Filling without cropping）

使用 bg-contain 通用類別將背景圖片縮放至外緣，且不裁剪或拉伸：

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

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

使用 bg-auto 通用類別以預設尺寸顯示背景圖片：

<div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>

使用自訂值（Using a custom value）

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

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

對於 CSS 變數，你也可以使用 bg-size-(<custom-property>) 語法：

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

這只是 bg-size-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。

響應式設計（Responsive design）

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

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

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