CSS Opacity (opacidad)

La propiedad opacity controla cuán transparente es un elemento. El valor va de 0 a 1, donde 0 es totalmente transparente y 1 es completamente opaco.

Valores de opacity

Los valores de opacity van de 0 a 1. Esto permite crear transiciones sutiles, capas translúcidas y efectos visuales.

Ejemplos básicos de opacity

En este ejemplo, tres cajas tienen diferentes valores de opacity: 1, 0.5 y 0.

De las tres cajas, la primera es totalmente opaca, la segunda semitransparente y la tercera invisible.

Opacity en efectos hover

Opacity se usa a menudo en efectos hover. Por ejemplo, un elemento puede ser más tenue al inicio y volverse totalmente visible al pasar el cursor.

Consejos para usar opacity

Opacity puede combinarse de muchas maneras con otras propiedades CSS. Aquí algunas sugerencias:

• Úsalo para crear overlays, como un fondo oscurecido en un modal.
• Combínalo con transition para lograr transiciones suaves.
• Recuerda que opacity también afecta a todos los elementos hijos.