Opacity

Control the opacity of elements.

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all,.5 is 50% visible, and 0 is completely transparent.

Set the opacity of an element using opacity="{value}" utilities.

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