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() 函数。

悬停时应用

在背景颜色工具前加上像 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-* 主题变量来定制项目中的颜色工具：

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

现在 bg-regal-blue 工具可以在你的标记中使用：

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

在 主题文档 中了解更多关于定制主题的信息。