w3.unpo<code>todo

Opacidad y transparencias

Opacidad ( opacity )

La propiedad opacity especifica la opacidad / transparencia de un elemento, y puede tener valores entre 1 ( totalmente opaco ) y 0 ( totalmente transparente ).

#opacidad {
  opacity: .5;
  background-color: rgb(0, 0, 0);
  height: 2em;
  width: 150px;
  position: absolute;
  top: 10px;
  color: #fff;
  text-align: center;
  padding-top: 1em;
}

#opacidad

En el ejemplo anterior no solo la caja ( #opacidad ) es transparente, sino también el texto dentro de la caja. Esto pasa porque la opacidad afecta también a los elementos hijos.
Claro esta que los elementos hijos pueden tener su propia opacidad con valores entre 0 y 1, pero siempre relativo a la opacidad del padre.
Por ejemplo: si la caja padre tiene una opacidad declarada de 0.5, y la caja hijo tiene también una opacidad declarada de 0.5, la opacidad real del hijo es de 0.5 * 0.5 = 0.25.

Una sugerencia

Si necesitamos que un elemento HTML tenga una cierta transparencia ( por ejemplo .5 ), pero queremos que un cierto elemento hijo sea opaco podemos hacer que todos los elementos hijos tengan opacity:.5:

#padre *{ opacity:.5; }

y después, para el elemento hijo opaco sobreescribimos la opacidad:

#padre .elementoHijoOpaco{ opacity:1; }

Transparencias rgba

Ya sabemos que podemos especificar los colores en el css utilizando códigos rgb

background-color:rgb( 255 , 0 , 0);

En el css3 además de los códigos rgb podemos utilizar los códigos rgba donde a representa el valor alpha ( como en transparencia alpha ). De hecho el parámetro alpha representa la opacidad y es un número decimal de 0.0 ( completamente transparente ) a 1.0 ( totalmente opaco ).

#alpha {
  background-color: rgba(0, 0, 0, .5);
  height: 2em;
  width: 150px;
  position: absolute;
  top: 10px;
  color: #fff;
  text-align: center;
  padding-top: 1em;
}

#alpha

Los navegadores antiguos ( IE8 ) no soportan los colores rgba, por lo cual es aconsejable facilitar también un color sin transparencia:

div {
  background-color: rgb(255,0,0);
  background-color: rgba(255,0,0,.8);
}

De esta manera los navegadores antiguos utilizarán la primera línea de código ( que entienden ) e ignorarán la segunda línea de código ( que no saben como interpretar ), mientras que los navegadores nuevos se quedarán con la segunda línea de código ( según las reglas del css ).

También podemos utilizar los porcentajes en el rgba, pero alpha tiene que quedar-se como un número decimal.

background-color: rgba(100%,0%,0%,.8);

Más información sobre el soporte de rgba en los navegadores

Transparencias hsla

También sabemos como especificar los colores en el css utilizando códigos hsl

background-color: hsl(0, 100%, 50%); /* rojo */

Además de los códigos hsl podemos utilizar los códigos hsla donde a, exactamente como en el caso de rgba, representa el valor alpha.

background-color: hsl(0, 100%, 50%, .8);