1. 背景
  2. background-color

背景

background-color

用于控制元素背景颜色的实用工具。

类名样式
bg-inherit
background-color: inherit;
bg-current
background-color: currentColor;
bg-transparent
background-color: transparent;
bg-black
background-color: var(--color-black); /* #000 */
bg-white
background-color: var(--color-white); /* #fff */
bg-red-50
background-color: var(--color-red-50); /* oklch(0.971 0.013 17.38) */
bg-red-100
background-color: var(--color-red-100); /* oklch(0.936 0.032 17.717) */
bg-red-200
background-color: var(--color-red-200); /* oklch(0.885 0.062 18.334) */
bg-red-300
background-color: var(--color-red-300); /* oklch(0.808 0.114 19.571) */
bg-red-400
background-color: var(--color-red-400); /* oklch(0.704 0.191 22.216) */

示例

基本示例

使用 bg-whitebg-indigo-500bg-transparent 等实用工具来控制元素的背景颜色

bg-blue-500

背景色-青色-500

bg-粉色-500

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

更改不透明度

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

bg-sky-500/100

bg-sky-500/75

bg-sky-500/50

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

使用自定义值

使用 bg-[<值>] 语法 来设置背景颜色基于完全自定义的值

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

对于 CSS 变量,您也可以使用 bg-(<自定义属性>) 语法

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

这只是 bg-[var(<自定义属性>)] 的简写形式,它会自动为您添加 var() 函数。

悬停时应用

使用诸如a background-color 实用工具,并带有类似 hover:* 的变体,以仅在该状态下应用该实用工具 hover:* 来仅在该状态下应用该实用工具

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

变体文档中了解有关使用变体的更多信息。

响应式设计

使用诸如a 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>

主题文档中了解有关自定义主题的更多信息 主题文档.

版权所有 © 2025 Tailwind Labs Inc.·商标政策