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.
| Valor | Efecto |
|---|---|
| 1 | Totalmente opaco |
| 0.5 | 50% de opacidad |
| 0 | Totalmente transparente |
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.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.