バックグラウンド（背景）

background-colorで意味を伝え、グラデーションで装飾を加えます。

項目

Background color

contextual text color クラスと同様に、要素の背景を任意の contextual クラスに設定します。背景ユーティリティはcolorを設定しないので、場合によってはbackground-color= color utilities を使用したいでしょう。

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-body

.bg-white

.bg-transparent

vue

<template>
  <b-div
    padding="3"
    margin="b-2"
    background-color="primary"
    text-color="white"
  >
    .bg-primary
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="secondary"
    text-color="white"
  >
    .bg-secondary
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="success"
    text-color="white"
  >
    .bg-success
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="danger"
    text-color="white"
  >
    .bg-danger
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="warning"
    text-color="dark"
  >
    .bg-warning
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="info"
    text-color="dark"
  >
    .bg-info
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="light"
    text-color="dark"
  >
    .bg-light
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="dark"
    text-color="white"
  >
    .bg-dark
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="body"
    text-color="dark"
  >
    .bg-body
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="white"
    text-color="dark"
  >
    .bg-white
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="transparent"
    text-color="dark"
  >
    .bg-transparent
  </b-div>
</template>

Background gradient

background-gradient属性を追加すると、背景画像として線形グラデーションが追加されます。このグラデーションは半透明の白から始まり、下に向かってフェードアウトしていきます。

カスタム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

vue

<template>
  <b-div
    padding="3"
    margin="b-2"
    background-color="primary"
    text-color="white"
    background-gradient
  >
    .bg-primary.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="secondary"
    text-color="white"
    background-gradient
  >
    .bg-secondary.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="success"
    text-color="white"
    background-gradient
  >
    .bg-success.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="danger"
    text-color="white"
    background-gradient
  >
    .bg-danger.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="warning"
    text-color="dark"
    background-gradient
  >
    .bg-warning.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="info"
    text-color="dark"
    background-gradient
    class="p-3 mb-2 bg-info bg-gradient text-dark"
  >
    .bg-info.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="light"
    text-color="dark"
    background-gradient
  >
    .bg-light.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="dark"
    text-color="white"
    background-gradient
  >
    .bg-dark.bg-gradient
  </b-div>
</template>

Opacity

Added in v5.1.0

v5.1.0より、background-colorユーティリティはCSSっを使ってSassで生成されるようになりました。これにより、コンパイルなしでリアルタイムに色を変更したり、アルファの透明度をダイナミックに変更することができます。

How it works

デフォルトのbackground-color="success"ユーティリティを考えてみましょう

Example

この不透明度を変更するには、カスタムスタイルまたはインラインスタイルで--bs-bg-opacityをオーバーライドする。

This is default success background

This is 50% opacity success background

vue

<template>
  <b-div
    padding="2"
    background-color="success"
    text-color="white"
  >
    This is default success background
  </b-div>
  <b-div
    padding="2"
    background-color="success"
    style="--bs-bg-opacity: 0.5"
  >
    This is 50% opacity success background
  </b-div>
</template>

または、background-opacity属性から選んでください。

This is default success background

This is 75% opacity success background