Background背景
Convey meaning through 通过background-color and add decoration with gradients.background-color传达意义，并添加渐变装饰。
Background color背景色
Similar to the contextual text color classes, set the background of an element to any contextual class. 与上下文文本颜色类类似，将元素的背景设置为任何上下文类。Background utilities do not set 背景实用程序不设置color, so in some cases you’ll want to use .text-* color utilities.color，因此在某些情况下，您需要使用.text-*颜色实用程序。
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Background gradient背景梯度
By adding a 通过添加.bg-gradient class, a linear gradient is added as background image to the backgrounds. .bg-gradient类，将线性梯度作为背景图像添加到背景中。This gradient starts with a semi-transparent white which fades out to the bottom.该渐变以半透明白色开始，逐渐变淡至底部。
Do you need a gradient in your custom CSS? 在自定义CSS中是否需要渐变？Just add 只需添加背景图像：background-image: var(--bs-gradient);.background-image: var(--bs-gradient);。
Opacity不透明度
Added in v5.1.0
As of v5.1.0, 从v5.1.0开始，使用CSS变量使用Sass生成background-color utilities are generated with Sass using CSS variables. background-color实用程序。This allows for real-time color changes without compilation and dynamic alpha transparency changes.这允许实时更改颜色，而无需编译和动态alpha透明度更改。
How it works工作原理
Consider our default 考虑我们的默认.bg-success utility..bg-success实用程序。
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
We use an RGB version of our 我们使用了一个RGB版本的--bs-success (with the value of 25, 135, 84) CSS variable and attached a second CSS variable, --bs-bg-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable). --bs-success（值为25, 135, 84）CSS变量，并附加了第二个CSS变量--bs-bg-opacity，用于alpha透明度（由于本地CSS变量，默认值为1）。That means anytime you use 这意味着无论何时使用.bg-success now, your computed color value is rgba(25, 135, 84, 1). .bg-success，计算的color值都是rgba(25, 135, 84, 1)。The local CSS variable inside each 每个.bg-* class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency..bg-*类中的本地CSS变量避免了继承问题，因此实用程序的嵌套实例不会自动具有修改的alpha透明度。
Example例子
To change that opacity, override 若要更改该不透明度，请通过自定义样式或内联样式覆盖--bs-bg-opacity via custom styles or inline styles.--bs-bg-opacity。
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>Or, choose from any of the 或者，从任何.bg-opacity utilities:.bg-opacity实用程序中选择：
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>Sass
In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.除了下面的SASS功能之外，考虑阅读包含颜色的CSS自定义属性（又名CSS变量）。
Variables变量
Most 大多数background-color utilities are generated by our theme colors, reassigned from our generic color palette variables.background-color实用程序都是由我们的主题颜色生成的，这些颜色是从我们的通用调色板变量重新分配的。
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));
Grayscale colors are also available, but only a subset are used to generate any utilities.灰度颜色也可用，但仅使用子集来生成任何实用程序。
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Map
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.然后将主题颜色放入Sass映射中，以便我们可以循环使用它们来生成实用程序、组件修改器等。
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grayscale colors are also available as a Sass map. 灰度颜色也可用作Sass贴图。This map is not used to generate any utilities.此映射不用于生成任何实用程序。
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
RGB colors are generated from a separate Sass map:RGB颜色由单独的Sass贴图生成：
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
And background color opacities build on that with their own map that’s consumed by the utilities API:而背景色不透明度则建立在它们自己的地图上，由实用程序API使用：
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
Mixins
No mixins are used to generate our background utilities没有使用mixin来生成我们的后台实用程序, but we do have some additional mixins for other situations where you’d like to create your own gradients.，但我们有一些额外的混合，用于其他情况，您希望创建自己的渐变。
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient);
}
}
// 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: $gray-700, $end-color: $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: $gray-700, $end-color: $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: $gray-700, $end-color: $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: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
Utilities API实用程序API
Background utilities are declared in our utilities API in 后台实用程序在scss/_utilities.scss. scss/_utilities.scss中的实用程序API中声明。Learn how to use the utilities API.了解如何使用实用程序API。
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),