背景颜色

使用不同的背景颜色可以向用户传达不同的信息或状态，渐变是一种平滑过渡的颜色效果，可以为背景添加视觉层次和美感。

背景颜色

与上下文文本颜色类类似，将元素的背景设置为任何上下文类。后台实用程序不会设置 color，因此在某些情况下你需要使用 .text-* 颜色实用程序。

背景渐变

通过添加 .bg-gradient 类，将线性渐变作为背景图片添加到背景中。该渐变从半透明的白色开始，逐渐淡出到底部。

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

不透明度 v5.1.0

Added in v5.1.0 从 v5.1.0 开始，background-color 工具是使用 CSS 变量通过 Sass 生成的。这允许实时颜色变化而无需编译和动态 Alpha 透明度变化。

怎么运行的

考虑默认的 .bg-success 工具。

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

我们使用 --bs-success 的 RGB 版本（值为 25, 135, 84）CSS 变量，并附加第二个 CSS 变量 --bs-bg-opacity，用于 alpha 透明度（由于本地 CSS 变量，默认值为 1）。这意味着你现在使用 .bg-success 时，计算出的 color 值为 rgba(25, 135, 84, 1)。每个 .bg-* 类中的本地 CSS 变量避免了继承问题，因此工具的嵌套实例不会自动具有修改后的 alpha 透明度。

示例

或者，从任何 .bg-opacity 工具中进行选择：