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>