CSS
HTML
COMPONENTS
CODE HUB
Generador de Opacidad CSS
Configuración
Opacity
Clase
Vista previa
Código
opacity: 50%;ReadyTools Academy
Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.
Verfolge deinen Fortschritt, lerne in deinem eigenen Tempo und habe Spaß dabei! 🎯
ComenzarGenerador de Opacidad CSS
En CSS, puedes controlar la opacidad (transparencia) de un elemento HTML usando la propiedad opacity. La propiedad opacity acepta un valor entre 0 y 1, donde 0 representa completamente transparente (invisible) y 1 representa completamente opaco (totalmente visible).
Aquí está cómo puedes usar la propiedad opacity en CSS:
.opacity-element {
opacity: 0.5;}
En este ejemplo:
La clase .opacity-element establece la opacidad del elemento al 50%, haciéndolo semi-transparente.
Puedes ajustar el valor de la propiedad opacity para controlar el grado de transparencia que deseas para el elemento. Por ejemplo, opacity: 0.2; haría que el elemento sea muy transparente, mientras que opacity: 0.8; haría que fuera solo ligeramente transparente.
Aquí hay otro ejemplo con opacidad completa y un efecto hover para cambiar la opacidad al pasar el ratón:
.full-opacity-element {
opacity: 1;
transition: opacity 0.3s;
}
.full-opacity-element:hover {
opacity: 0.7;
}
En este caso:
- La clase .full-opacity-element: inicialmente establece el elemento como completamente opaco (100% opacidad).
- La propiedad transition añade un efecto de transición suave para el cambio de opacidad.
- Al pasar el ratón (.full-opacity-element:hover), la opacidad se reduce al 70%, creando un efecto de hover.
La propiedad opacity es comúnmente usada para crear efectos hover, animaciones de desvanecimiento o ajustar la visibilidad de los elementos basándose en interacciones del usuario. Es una herramienta útil para controlar la transparencia de los elementos y añadir profundidad al diseño de tu sitio web.