La propiedad
opacityespecifica la opacidad/transparencia de un elemento.
Imagen transparente
La propiedad opacity puede tomar un valor de 0.0 a 1.0. Cuanto menor sea el valor, más transparente:
Ejemplo:
Efecto hover transparente
La propiedad opacity a menudo se usa junto con el selector :hover para cambiar la opacidad al pasar el mouse:
Ejemplo:
Ejemplo explicado
El primer bloque de CSS es similar al código del Ejemplo 1. Además, hemos agregado lo que debería suceder cuando un usuario pasa el mouse sobre una de las imágenes. En este caso, queremos que la imagen NO sea transparente cuando el usuario pasa el cursor sobre ella. El CSS para esto es opacity:1;.
Cuando el puntero del mouse se aleje de la imagen, la imagen volverá a ser transparente.
Un ejemplo de efecto hover invertido:
Ejemplo:
Caja transparente
Al usar la propiedad opacity para agregar transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia. Esto puede hacer que el texto dentro de un elemento completamente transparente sea difícil de leer:
Ejemplo:
Transparencia usando rgba
Si no desea aplicar opacidad a los elementos secundarios, como en nuestro ejemplo anterior, use valores de color RGBA. El siguiente ejemplo establece la opacidad para el color de fondo y no para el texto:
Un valor de color RGBA se especifica con: rgba(rojo, verde, azul, alfa). El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).
Ejemplo:
Texto en caja transparente
Ejemplo:
Ejemplo explicado
Primero, creamos un elemento <div> (class="background") con una imagen de fondo y un borde.
Luego creamos otro <div> (class="transbox") dentro del primer <div>.
El <div class="transbox"> tiene un color de fondo y un borde - el div es transparente.
Dentro del <div> transparente, agregamos algo de texto dentro de un elemento <p>.
Resumen
La propiedad CSS opacity permite establecer la transparencia de un elemento, con valores de 0.0 a 1.0. Se puede utilizar junto con el selector :hover para crear efectos de transparencia al pasar el cursor sobre un elemento. Si se aplica a un elemento padre, todos los elementos secundarios heredan la misma transparencia, lo que puede dificultar la lectura del texto. Para evitar esto, se puede utilizar el valor de color RGBA para establecer la opacidad del fondo sin afectar al texto. Se pueden crear cajas transparentes con texto utilizando elementos <div> y <p>.
Traducido con 💚 desde W3Schools.com