Bootstrap
5.3
Utilidades
Opacidad

Opacidad

Controla la opacidad de los elementos.

La propiedad opacity establece el nivel de opacidad de un elemento. El nivel de opacidad describe el nivel de transparencia, donde 1 no es transparente en absoluto, .5 es 50% visible y 0 es completamente transparente.

Establece la opacity de un elemento usando las utilidades .opacity-{value}.

HTML
<div class="opacity-100 p-3 m-2 bg-primary text-light fw-bold rounded">100%</div>
<div class="opacity-75 p-3 m-2 bg-primary text-light fw-bold rounded">75%</div>
<div class="opacity-50 p-3 m-2 bg-primary text-light fw-bold rounded">50%</div>
<div class="opacity-25 p-3 m-2 bg-primary text-light fw-bold rounded">25%</div>
<div class="opacity-0 p-3 m-2 bg-primary text-light fw-bold rounded">0%</div>

CSS

API de utilidades de Sass

Las utilidades de opacidad se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

scss/_utilities.scss (opens in a new tab)

scss/_utilities.scss
"opacity": (
  property: opacity,
  values: (
    0: 0,
    25: .25,
    50: .5,
    75: .75,
    100: 1,
  )
),