背景 · Bootstrap 6.0 中文文档

类名	样式
.bg-primary	--bs-bg: var(--bs-primary-bg); background-color: var(--bs-bg);
.bg-accent	--bs-bg: var(--bs-accent-bg); background-color: var(--bs-bg);
.bg-success	--bs-bg: var(--bs-success-bg); background-color: var(--bs-bg);
.bg-danger	--bs-bg: var(--bs-danger-bg); background-color: var(--bs-bg);
.bg-warning	--bs-bg: var(--bs-warning-bg); background-color: var(--bs-bg);
.bg-info	--bs-bg: var(--bs-info-bg); background-color: var(--bs-bg);
.bg-inverse	--bs-bg: var(--bs-inverse-bg); background-color: var(--bs-bg);
.bg-secondary	--bs-bg: var(--bs-secondary-bg); background-color: var(--bs-bg);
.bg-body	--bs-bg: var(--bs-bg-body); background-color: var(--bs-bg);
.bg-1	--bs-bg: var(--bs-bg-1); background-color: var(--bs-bg);
.bg-2	--bs-bg: var(--bs-bg-2); background-color: var(--bs-bg);
.bg-3	--bs-bg: var(--bs-bg-3); background-color: var(--bs-bg);
.bg-4	--bs-bg: var(--bs-bg-4); background-color: var(--bs-bg);
.bg-fg	--bs-bg: var(--bs-bg-fg); background-color: var(--bs-bg);
.bg-white	--bs-bg: var(--bs-bg-white); background-color: var(--bs-bg);
.bg-black	--bs-bg: var(--bs-bg-black); background-color: var(--bs-bg);
.bg-透明	--bs-bg: var(--bs-bg-transparent); background-color: var(--bs-bg);
.bg-muted-primary	--bs-bg: var(--bs-primary-bg-muted); background-color: var(--bs-bg);
.bg-muted-accent	--bs-bg: var(--bs-accent-bg-muted); background-color: var(--bs-bg);
.bg-muted-success	--bs-bg: var(--bs-success-bg-muted); background-color: var(--bs-bg);
.bg-muted-danger	--bs-bg: var(--bs-danger-bg-muted); background-color: var(--bs-bg);
.bg-muted-warning	--bs-bg: var(--bs-warning-bg-muted); background-color: var(--bs-bg);
.bg-muted-info	--bs-bg: var(--bs-info-bg-muted); background-color: var(--bs-bg);
.bg-muted-inverse	--bs-bg: var(--bs-inverse-bg-muted); background-color: var(--bs-bg);
.bg-muted-secondary	--bs-bg: var(--bs-secondary-bg-muted); background-color: var(--bs-bg);
.bg-subtle-primary	--bs-bg: var(--bs-primary-bg-subtle); background-color: var(--bs-bg);
.bg-微妙-强调	--bs-bg: var(--bs-accent-bg-subtle); background-color: var(--bs-bg);
.bg-subtle-success	--bs-bg: var(--bs-success-bg-subtle); background-color: var(--bs-bg);
.bg-subtle-danger	--bs-bg: var(--bs-danger-bg-subtle); background-color: var(--bs-bg);
.bg-轻微警告	--bs-bg: var(--bs-warning-bg-subtle); background-color: var(--bs-bg);
.bg-subtle-info	--bs-bg: var(--bs-info-bg-subtle); background-color: var(--bs-bg);
.bg-微妙-相反	--bs-bg: var(--bs-inverse-bg-subtle); background-color: var(--bs-bg);
.bg-subtle-secondary	--bs-bg: var(--bs-secondary-bg-subtle); background-color: var(--bs-bg);
.bg-10	background-color: color-mix(in oklch, var(--bs-bg) 10%, transparent);
.bg-20	background-color: color-mix(in oklch, var(--bs-bg) 20%, transparent);
.bg-30	background-color: color-mix(in oklch, var(--bs-bg) 30%, transparent);
.bg-40	background-color: color-mix(in oklch, var(--bs-bg) 40%, transparent);
.bg-50	background-color: color-mix(in oklch, var(--bs-bg) 50%, transparent);
.bg-60	background-color: color-mix(in oklch, var(--bs-bg) 60%, transparent);
.bg-70	background-color: color-mix(in oklch, var(--bs-bg) 70%, transparent);
.bg-80	background-color: color-mix(in oklch, var(--bs-bg) 80%, transparent);
.bg-90	background-color: color-mix(in oklch, var(--bs-bg) 90%, transparent);
.bg-100	background-color: var(--bs-bg);
.bg-gradient	background-image: var(--bs-gradient);

可访问性提示：使用颜色传达含义

仅使用颜色来增加意义只提供视觉提示，这不会传达给使用辅助技术（如屏幕阅读器）的用户。请确保意义从内容本身即可明显体现（例如，可见的文本以及 足够的 颜色对比) 或通过替代方式包含，例如通过隐藏的附加文本 .visually-hidden 班级

颜色

使用基于我们主题颜色构建的工具更改background-color，使用.bg-{color}、.bg-muted-{color}和.bg-subtle-{color}。所有这些背景颜色工具都会将background-color属性设置为本地 CSS 变量--bs-bg，该变量的值为主题颜色。根颜色标记也使用light-dark()以确保在浅色和深色模式下都有足够的对比度。

例如，.bg-primary 将 --bs-bg 变量设置为 var(--bs-primary-bg)：

CSS

          .bg-primary {
  --bs-bg: var(--bs-primary-bg);
  background-color: var(--bs-bg);
}

这种方法还允许我们轻松地使用我们的 .bg-{opacity} 工具支持半透明，因为我们可以使用 color-mix() 配合 CSS 变量来生成适当的颜色。有关更多详细信息，请参阅不透明度部分。

.bg-primary

.bg-muted-primary

.bg-subtle-primary

.bg-accent

.bg-muted-accent

.bg-微妙-强调

.bg-success

.bg-muted-success

.bg-subtle-success

.bg-danger

.bg-muted-danger

.bg-subtle-danger

.bg-warning

.bg-muted-warning

.bg-微妙警告

.bg-info

.bg-muted-info

.bg-subtle-info

.bg-inverse

.bg-muted-inverse

.bg-微妙-反向

.bg-secondary

.bg-muted-secondary

.bg-subtle-secondary

.bg-body

.bg-1

.bg-2

.bg-3

.bg-4

.bg-black

.bg-white

.bg-透明

HTML

<div class="p-3 mb-2 bg-primary fg-contrast-primary">.bg-primary</div>
<div class="p-3 mb-2 bg-muted-primary fg-primary">.bg-muted-primary</div>
<div class="p-3 mb-2 bg-subtle-primary fg-primary">.bg-subtle-primary</div>
<div class="p-3 mb-2 bg-accent fg-contrast-accent">.bg-accent</div>
<div class="p-3 mb-2 bg-muted-accent fg-accent">.bg-muted-accent</div>
<div class="p-3 mb-2 bg-subtle-accent fg-accent">.bg-subtle-accent</div>
<div class="p-3 mb-2 bg-success fg-contrast-success">.bg-success</div>
<div class="p-3 mb-2 bg-muted-success fg-success">.bg-muted-success</div>
<div class="p-3 mb-2 bg-subtle-success fg-success">.bg-subtle-success</div>
<div class="p-3 mb-2 bg-danger fg-contrast-danger">.bg-danger</div>
<div class="p-3 mb-2 bg-muted-danger fg-danger">.bg-muted-danger</div>
<div class="p-3 mb-2 bg-subtle-danger fg-danger">.bg-subtle-danger</div>
<div class="p-3 mb-2 bg-warning fg-contrast-warning">.bg-warning</div>
<div class="p-3 mb-2 bg-muted-warning fg-warning">.bg-muted-warning</div>
<div class="p-3 mb-2 bg-subtle-warning fg-warning">.bg-subtle-warning</div>
<div class="p-3 mb-2 bg-info fg-contrast-info">.bg-info</div>
<div class="p-3 mb-2 bg-muted-info fg-info">.bg-muted-info</div>
<div class="p-3 mb-2 bg-subtle-info fg-info">.bg-subtle-info</div>
<div class="p-3 mb-2 bg-inverse fg-contrast-inverse">.bg-inverse</div>
<div class="p-3 mb-2 bg-muted-inverse fg-inverse">.bg-muted-inverse</div>
<div class="p-3 mb-2 bg-subtle-inverse fg-inverse">.bg-subtle-inverse</div>
<div class="p-3 mb-2 bg-secondary fg-contrast-secondary">.bg-secondary</div>
<div class="p-3 mb-2 bg-muted-secondary fg-secondary">.bg-muted-secondary</div>
<div class="p-3 mb-2 bg-subtle-secondary fg-secondary">.bg-subtle-secondary</div>
<div class="p-3 mb-2 bg-body fg-body">.bg-body</div>
<div class="p-3 mb-2 bg-1">.bg-1</div>
<div class="p-3 mb-2 bg-2">.bg-2</div>
<div class="p-3 mb-2 bg-3">.bg-3</div>
<div class="p-3 mb-2 bg-4">.bg-4</div>
<div class="p-3 mb-2 bg-black fg-white">.bg-black</div>
<div class="p-3 mb-2 bg-white fg-black">.bg-white</div>
<div class="p-3 mb-2 bg-transparent fg-body">.bg-transparent</div>

背景渐变

通过添加一个 .bg-gradient 类，在背景上添加了线性渐变作为背景图像。这个渐变从半透明的白色开始，并在底部逐渐消失。

你在自定义 CSS 中需要渐变吗？只需添加 background-image: var(--bs-gradient);。

.bg-primary.bg-gradient

.bg-accent.bg-gradient

.bg-success.bg-gradient

.bg-danger.bg-gradient

.bg-warning.bg-gradient

.bg-info.bg-gradient

.bg-inverse.bg-gradient

.bg-secondary.bg-gradient

.bg-black.bg-gradient

HTML

<div class="p-3 bg-primary bg-gradient fg-contrast-primary">.bg-primary.bg-gradient</div>
<div class="p-3 bg-accent bg-gradient fg-contrast-accent">.bg-accent.bg-gradient</div>
<div class="p-3 bg-success bg-gradient fg-contrast-success">.bg-success.bg-gradient</div>
<div class="p-3 bg-danger bg-gradient fg-contrast-danger">.bg-danger.bg-gradient</div>
<div class="p-3 bg-warning bg-gradient fg-contrast-warning">.bg-warning.bg-gradient</div>
<div class="p-3 bg-info bg-gradient fg-contrast-info">.bg-info.bg-gradient</div>
<div class="p-3 bg-inverse bg-gradient fg-contrast-inverse">.bg-inverse.bg-gradient</div>
<div class="p-3 bg-secondary bg-gradient fg-contrast-secondary">.bg-secondary.bg-gradient</div>
<div class="p-3 bg-black bg-gradient fg-white">.bg-black.bg-gradient</div>

不透明度

使用任何方式更改背景颜色的不透明度 .bg-<percentage> 使用的工具类 color-mix() 将背景颜色混合 transparent.

这是默认的成功背景

这是90%不透明度的成功背景

这是 80% 不透明度的成功背景

这是70%不透明度的成功背景

这是60%不透明度的成功背景

这是50%不透明度的成功背景

这是40%不透明度的成功背景

这是30%不透明度的成功背景

这是20%不透明度的成功背景

这是10%不透明度的成功背景

HTML

<div class="bg-success p-2">This is default success background</div>
<div class="bg-success p-2 bg-90">This is 90% opacity success background</div>
<div class="bg-success p-2 bg-80">This is 80% opacity success background</div>
<div class="bg-success p-2 bg-70">This is 70% opacity success background</div>
<div class="bg-success p-2 bg-60">This is 60% opacity success background</div>
<div class="bg-success p-2 bg-50">This is 50% opacity success background</div>
<div class="bg-success p-2 bg-40">This is 40% opacity success background</div>
<div class="bg-success p-2 bg-30">This is 30% opacity success background</div>
<div class="bg-success p-2 bg-20">This is 20% opacity success background</div>
<div class="bg-success p-2 bg-10">This is 10% opacity success background</div>

同样可以应用于细微和柔和的背景颜色。

这是微妙的成功背景

这是40%的成功背景

这是20%的成功背景

HTML

<div class="bg-subtle-success p-2">This is subtle success background</div>
<div class="bg-muted-success bg-40 p-2">This is 40% success background</div>
<div class="bg-muted-success bg-20 p-2">This is 20% success background</div>

CSS

除了以下 Sass 功能之外，还可以考虑阅读我们包含的 CSS 自定义属性（也称为 CSS 变量），用于颜色和其他内容。

Sass 变量

大多数background-color工具类是由我们的主题颜色生成的，这些颜色从我们的通用调色板变量重新分配。灰度颜色也可用，但只有部分颜色被用于生成任何工具类。有关我们的基础颜色变量和映射，请参阅颜色文档。

scss/_config.scss

$gradient: linear-gradient(180deg, color-mix(var(--white) 15%, transparent), color-mix(var(--white) 0%, transparent));

Sass map

主题颜色随后被放入 Sass map中，以便我们可以循环它们来生成我们的工具类、组件修改器等。见主题完整文档 $theme-colors Sass map。

Sass 混入

生成背景工具时未使用任何混入，但我们确实有一些用于其他情况的额外混入，当你想创建自己的渐变时可以使用。

scss/mixins/_gradients.scss

@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--gradient);
  }
}

scss/mixins/_gradients.scss

// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: var(--gray-700), $end-color: var(--gray-800), $start-percent: 0%, $end-percent: 100%) {
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}

// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: var(--gray-700), $end-color: var(--gray-800), $start-percent: null, $end-percent: null) {
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}

@mixin gradient-directional($start-color: var(--gray-700), $end-color: var(--gray-800), $deg: 45deg) {
  background-image: linear-gradient($deg, $start-color, $end-color);
}

@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}

@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}

@mixin gradient-radial($inner-color: var(--gray-700), $outer-color: var(--gray-800)) {
  background-image: radial-gradient(circle, $inner-color, $outer-color);
}

@mixin gradient-striped($color: rgb(255 255 255 / .15), $angle: 45deg) {
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}

Sass 工具 API

后台工具类在我们的工具类 API scss/_utilities.scss 中声明。了解如何使用工具类 API。

scss/_utilities.scss

"bg-color": (
  property: (
    "--bg": null,
    "background-color": var(--bg)
  ),
  class: bg,
  values: map.merge(theme-color-refs("bg"), theme-token-refs($theme-bgs, "bg")),
),
"bg-color-subtle": (
  property: (
    "--bg": null,
    "background-color": var(--bg)
  ),
  class: bg-subtle,
  values: theme-color-refs("bg-subtle"),
),
"bg-color-muted": (
  property: (
    "--bg": null,
    "background-color": var(--bg)
  ),
  class: bg-muted,
  values: theme-color-refs("bg-muted"),
),
"bg-opacity": (
  class: bg,
  property: background-color,
  values: theme-opacity-values(--bg)
),