background-color

範例（Examples）

基本範例（Basic example）

使用 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>

變更透明度（Changing the opacity）

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

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

使用自訂值（Using a custom value）

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

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

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

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

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

在 hover 時套用（Applying on hover）

在 background-color 通用類別前面加上像 hover:* 這樣的變體，讓該通用類別只在該狀態下套用：

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

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

響應式設計（Responsive design）

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

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

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

自訂你的主題（Customizing your theme）

使用 --color-* 主題變數來自訂專案中的 color 通用類別：

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

現在可以在標記中使用 bg-regal-blue 通用類別：

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

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