Opacidad / transparencia CSS

Antes hemos visto cómo podemos hacer un color transparente. Pero y si quisieramos hacerlo con una imagen? o con un elemento. Con opacity podemos hacerlo sobre un elemento. La propiedad opacity especifica la opacidad / transparencia de un elemento.

La opacitypropiedad puede tomar un valor de 0,0 a 1,0. Cuanto menor sea el valor, más transparente:

bosque opacidad 0.2

bosque opacidad 0.5

bosque opacidad 1 (predeterminado)

Ejemplo img { opacity: 0.5; } Efecto de desplazamiento transparente La opacitypropiedad se usa a menudo junto con el :hover selector para cambiar la opacidad al pasar el mouse:

Auroras borealesMontañasItalia Ejemplo img { opacity: 0.5; }

img:hover { opacity: 1.0; } Ejemplo explicado El primer bloque 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 mouse sobre ella. El CSS para esto es opacity:1;.

Cuando el puntero del mouse se aleja de la imagen, la imagen volverá a ser transparente.

Un ejemplo de efecto de desplazamiento invertido:

Auroras borealesMontañasItalia Ejemplo img:hover { opacity: 0.5; } ANUNCIO PUBLICITARIO

Caja transparente Cuando se usa la opacitypropiedad 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:

opacidad 1

opacidad 0,6

opacidad 0.3

opacidad 0.1

Ejemplo div { opacity: 0.3; } 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 del color de fondo y no del texto:

100% de opacidad

60% de opacidad

30% de opacidad

10% de opacidad

Aprendió de nuestro Capítulo Colores CSS , que puede usar RGB como valor de color. Además de RGB, puede utilizar un valor de color RGB con un canal alfa (RGBA), que especifica la opacidad de un color.

Un valor de color RGBA se especifica con: rgba (rojo, verde, azul, alfa ). El parámetro alfa es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).

Consejo: obtendrá más información sobre los colores RGBA en nuestro capítulo Colores CSS .

Ejemplo div { background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */ } Texto en caja transparente Este es un texto que se coloca en el cuadro transparente.

Ejemplo

This is some text that is placed in the transparent box.

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>.