背景 - 光年(Light Year Admin V5)后台管理系统模板

背景

.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>