<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);
。
<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
相关类:
<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>