La opacitypropiedad controla qué tan opaco es un elemento en una escala de 0.0 a 1.0. Cuanto menor sea el valor, más transparente será el elemento.
Puede elegir hasta qué punto desea que el elemento sea transparente. Debe agregar la siguiente propiedad CSS para lograr los niveles de transparencia.
Totalmente opaco
.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }Semitransparente
.class-name { opacity: 0.5; }Totalmente transparente
.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }Alternativamente, puede usar rgbapara establecer la opacidad de un elemento:
.class-name{ background-color: rgba(0, 0, 0, .5); }Esto establece el background-colorcolor de un elemento en negro con un 50% de opacidad. El último valor de un rgbavalor es el valor alfa . Un valor alfa de 1 es igual al 100% de opacidad y 0,5 (o 0,5 como arriba) es igual al 50% de opacidad.
Opacidad y transparencia de la imagen
La opacitypropiedad le permite hacer que una imagen sea transparente reduciendo cuán opaca es.
Opacity toma un valor entre 0.0 y 1.0.
1.0 es el valor predeterminado para cualquier imagen. Es completamente opaco.
Ejemplo
img { opacity: 0.3; }Incluir filter: alpha(opacity=x)para IE8 y versiones anteriores. La x toma un valor de 0 a 100.
img { opacity: 0.3; filter: alpha(opacity=30); }A continuación, se muestra un ejemplo de una imagen configurada con los parámetros del ejemplo anterior.
Puede emparejarse opacitycon :hoverpara crear un efecto dinámico de desplazamiento del mouse.
Ejemplo:
img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }Un ejemplo de codepen para mostrar una imagen transparente que se vuelve opaca al pasar el mouse
Puede crear el efecto opuesto con menos código ya que la imagen tiene una opacidad 1.0 por defecto
Ejemplo:
img:hover { opacity: 0.3; filter: alpha(opacity=30); }Aquí hay un ejemplo de codepen para mostrar transparencia al pasar el mouse.
Más sobre CSS
Hojas de estilo en cascada (CSS)
CSS es un acrónimo de Cascading Style Sheets. Se inventó por primera vez en 1996 y ahora es una característica estándar de todos los principales navegadores web.
CSS permite a los desarrolladores controlar el aspecto de las páginas web mediante el "estilo" de la estructura HTML de esa página.
Las especificaciones CSS las mantiene el World Wide Web Consortium (W3C).
Puedes construir algunas cosas asombrosas solo en CSS, como este juego de Buscaminas de CSS puro (que no usa JavaScript).