背景
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-indigo
.bg-purple
.bg-pink
.bg-yellow
.bg-cyan
.bg-brown
.bg-teal
.bg-body
.bg-white
.bg-transparent
<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-indigo text-white">.bg-indigo</div>
<div class="p-3 mb-2 bg-purple text-white">.bg-purple</div>
<div class="p-3 mb-2 bg-pink text-white">.bg-pink</div>
<div class="p-3 mb-2 bg-yellow text-white">.bg-yellow</div>
<div class="p-3 mb-2 bg-cyan text-white">.bg-cyan</div>
<div class="p-3 mb-2 bg-brown text-white">.bg-brown</div>
<div class="p-3 mb-2 bg-teal text-white">.bg-teal</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>
背景渐变

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

.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
.bg-indigo.bg-gradient
.bg-purple.bg-gradient
.bg-pink.bg-gradient
.bg-yellow.bg-gradient
.bg-cyan.bg-gradient
.bg-brown.bg-gradient
.bg-teal.bg-gradient
不透明度
这是默认的 success 背景
这是 50% 不透明度的 success 背景
<div class="bg-success p-2 text-white">这是默认的 success 背景</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">这是 50% 不透明度的 success 背景</div>

或者，从任何一个选项中选择 .text-opacity 相关类：

这是默认的 success 背景
这是 75% 不透明度的 success 背景
这是 50% 不透明度的 success 背景
这是 25% 不透明度的 success 背景
这是 10% 不透明度的 success 背景
<div class="bg-success p-2 text-white">这是默认的 success 背景</div>
<div class="bg-success p-2 text-white bg-opacity-75">这是 75% 不透明度的 success 背景</div>
<div class="bg-success p-2 text-dark bg-opacity-50">这是 50% 不透明度的 success 背景</div>
<div class="bg-success p-2 text-dark bg-opacity-25">这是 25% 不透明度的 success 背景</div>
<div class="bg-success p-2 text-dark bg-opacity-10">这是 10% 不透明度的 success 背景</div>