background-color

範例

基本範例

使用像是 bg-white、bg-indigo-500 和 bg-transparent 等工具類別來控制元素的背景顏色

<button class="bg-blue-500 ...">Button A</button><button class="bg-cyan-500 ...">Button B</button><button class="bg-pink-500 ...">Button C</button>

變更不透明度

使用顏色不透明度修飾符來控制元素背景顏色的不透明度

<button class="bg-sky-500/100 ..."></button><button class="bg-sky-500/75 ..."></button><button class="bg-sky-500/50 ..."></button>

使用自訂值

使用 bg-[<value>] 語法 來設定背景顏色基於完全自訂的值

<div class="bg-[#50d71e] ...">  <!-- ... --></div>

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

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

這只是 bg-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函數。

滑鼠懸停時套用

加上一個 background-color 工具類別，帶有像是 hover:* 的變體，僅在該狀態下套用工具類別

<button class="bg-indigo-500 hover:bg-fuchsia-500 ...">Save changes</button>

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

響應式設計

加上一個 background-color 工具類別 帶有像是 md: 的斷點變體，僅在中等 螢幕尺寸及以上套用工具類別

<div class="bg-blue-500 md:bg-green-500 ...">  <!-- ... --></div>

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

自訂您的主題

使用 --color-* 主題變數來自訂您專案中的color 工具類別

@theme {  --color-regal-blue: #243c5a; }

現在 regal-blue bg-工具類別可以在您的標記中使用 工具類別可以在您的標記中使用

<div class="bg-regal-blue">  <!-- ... --></div>

在主題文件中了解更多關於自訂您的主題的資訊。 主題文件.