Saltar al contenido principal Saltar a la navegación de la documentación
Agregado en v5.1 Ver en GitHub

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}.

100%
75%
50%
25%
0%
<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>
<div class="opacity-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.

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