背景颜色

示例

基本示例

使用类似 bg-white、bg-indigo-500 和 bg-transparent 的工具类来控制元素的背景颜色：

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

改变透明度

使用颜色透明度修饰符来控制元素背景颜色的透明度：

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

使用自定义值

Use the bg-[<value>] syntax to set the 背景颜色 based on a completely custom value:

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

For CSS variables, you can also use the bg-(<custom-property>) syntax:

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

This is just a shorthand for bg-[var(<custom-property>)] that adds the var() function for you automatically.

鼠标悬停时应用

Prefix a background-color utility with a variant like hover:* to only apply the utility in that state:

<button class="bg-indigo-500 hover:bg-fuchsia-500 ...">保存更改</button>

Learn more about using variants in the variants documentation.

响应式设计

Prefix a background-color utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义你的主题

Use the --color-* theme variables to customize the color utilities in your project:

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

Now the bg-regal-blue utility can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.