学习 Bootstrap 5 之 Colors 和 Opacity

Bootstrap 5 之 Colors 和 Opacity"/>

学习 Bootstrap 5 之 Colors 和 Opacity

学习 Bootstrap 5 之 颜色 和 不透明度

• 颜色 (Colors)
• • 1. 颜色
  • 2. 组件的颜色
• 不透明度 (Opacity)
• • 1. 元素的不透明度
  • 2. 组件的不透明度
  • • (1). 文字不透明度 text-opacity-N
    • (2). 背景不透明度 bg-opacity-N

颜色 (Colors)

Bootstrap 5 官方文档

1. 颜色

  <div class="bg-primary">primary 的颜色</div><div class="bg-secondary">secondary 的颜色</div><div class="bg-success">success 的颜色</div><div class="bg-danger">danger 的颜色</div><div class="bg-warning">warning 的颜色</div><div class="bg-info">info 的颜色</div><div class="bg-light">light 的颜色</div><div class="bg-dark">dark 的颜色</div>

2. 组件的颜色

不透明度 (Opacity)

1. 元素的不透明度

设置整个区域的元素的不透明度

opacity-N

N的值为 0, 25, 50, 75, 100

  <div class="bg-primary opacity-0">opacity-0</div><div class="bg-primary opacity-25">opacity-25</div><div class="bg-primary opacity-50">opacity-50</div><div class="bg-primary opacity-75">opacity-75</div><div class="bg-primary opacity-100">opacity-100</div><div class="bg-primary">默认</div>

2. 组件的不透明度

(1). 文字不透明度 text-opacity-N

  <div class="text-dark text-opacity-25">text-opacity-25</div><div class="text-dark text-opacity-50">text-opacity-50</div><div class="text-dark text-opacity-75">text-opacity-75</div><div class="text-dark">默认</div>

(2). 背景不透明度 bg-opacity-N

使用.bg-opacity-N类, 默认情况下是100, 即不透明

bg-opacity-N N取值为{10, 25, 50, 75, 100}

  <div class="bg-primary bg-opacity-10">10%</div><div class="bg-primary bg-opacity-25">25%</div><div class="bg-primary bg-opacity-50">50%</div><div class="bg-primary bg-opacity-75">75%</div><div class="bg-primary bg-opacity-100">100%</div><div class="bg-primary">默认</div>