オパシティ

要素の不透明度を制御します。

このopacityプロパティは、要素の不透明度レベルを設定します。不透明度レベル1は、全く透明ではありません。5は50%程見えます。0は完全に透明である透明度のレベルを表します。

opacityユーティリティを使用して、要素のopacity="{value}"を設定します。

100%
75%
50%
25%
vue
<template>
 <b-div flex="sm">
  <b-div
   :opacity="100"
   padding="3"
   margin="2"
   background-color="primary"
   text-color="light"
   font-weight="bold"
   rounded
  >
   100%
  </b-div>
  <b-div
   :opacity="75"
   padding="3"
   margin="2"
   background-color="primary"
   text-color="light"
   font-weight="bold"
   rounded
  >
   75%
  </b-div>
  <b-div
   :opacity="50"
   padding="3"
   margin="2"
   background-color="primary"
   text-color="light"
   font-weight="bold"
   rounded
  >
   50%
  </b-div>
  <b-div
   :opacity="25"
   padding="3"
   margin="2"
   background-color="primary"
   text-color="light"
   font-weight="bold"
   rounded
  >
   25%
  </b-div>
 </b-div>
</template>

See Also