Transparencia CSS

La propiedad opacity especifica la opacidad o transparencia de una etiqueta.

Imagen transparente

La propiedad opacity puede tomar un valor de 0.0 a 1.0. A mayor valor, mayor transparencia.

Nota: Para navegadores antiguos se puede usar filter:alpha(opacity=x). El valor de x puede ser de 0 a 100. A mayor valor, mayor transparencia.

img {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

Transparencias con hover

La propiedad opacity es común usarla en combinación con la pseudo-clase :hover para cambiar la transparencia cuando el puntero del mousa pasa por encima.

En el siguiente ejemplo, se especifica una imagen con opacidad pero cuando pasa encima el puntero del mouse elimina la opacidad:

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

También puede ser a la inversa, que cuando pasa encima el puntero del mouse aplique la opacidad a la imagen:

img:hover {
  opacity: 0.5;
}

Caja Transparente

Cuando usamos la propiedad opacity para agregar transparencia a el fondo de un elemento, todas las etiquetas anidadas heredan la misma transparencia. Esto puede hacer que el texto dentro de una etiqueta con mucha transparencia, sea difícil de leer.

div {
  opacity: 0.5
}

Transparencia usando RGBA

Si no se desea que la opacidad aplique a las etiquetas anidadas, entonces se utilizan los valores de color RGBA.

Un valor de color RGBA es especificado con rgba(red,green,blue,alpha). El parámetro alpha es valor numérico entre 0.0 a 1.0

div {
  background: rgba(76, 175, 80, 0.3)
}