background-size

範例

填滿容器

使用 bg-cover 實用類別來縮放背景圖片，直到填滿背景圖層，必要時裁切圖片。

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

填滿但不裁切

使用 bg-contain 實用類別來縮放背景圖片到外邊緣，不裁切或拉伸。

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

使用預設尺寸

使用 bg-auto 實用類別來以預設尺寸顯示背景圖片。

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

使用自定義值

使用 bg-[<值>] 語法 來設定背景圖片尺寸基於完全自定義的值

<div class="bg-[200px_100px] ...">  <!-- ... --></div>

對於 CSS 變數，你也可以使用 bg-(<自定義屬性>) 語法

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

這只是 bg-[var(<自定義屬性>)] 的簡寫，它會自動為你添加 var() 函式。

響應式設計

前綴a background-size 實用類別 加上一個斷點變體，例如 md:，僅在中等 螢幕尺寸及以上應用該實用類別。

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

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