background-color

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use utilities like bg-white, bg-indigo-500 and bg-transparent to control the background color of an element:

<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)

¥Changing the opacity

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

¥Use the color opacity modifier to control the opacity of an element's background color:

<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)

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

悬停时应用(Applying on hover)

¥Applying on hover

在 background-color 工具前面加上一个变体，例如 hover:*，以便仅在该状态下应用该工具：

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

请参阅 变体文档 详细了解如何使用变体。

响应式设计(Responsive design)

¥Responsive design

在 background-color 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --color-* 主题变量来自定义项目中的 color 工具：

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

现在 bg-regal-blue 工具可用于你的标记：

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

在此详细了解如何自定义主题： 主题文档。