Con CSS podemos crear elementos web con cierto grado de transparencia. Un valor de opacidad 1 significa que el elemento es 100% transparente, y un valor de 0 significa que no tiene nada de transparencia.

Tenemos dos tipos de declaraciones:

div { background-color: rgb(255,0,0); opacity: 0.5; }

opacity css

div { background-color: rgba(255,0,0,0.5); }

La diferencia entre los dos tipos de declaraciones es la forma en que los hijos del elemento declarado heredan la capacidad de ser transparentes o no. Con la primera declaración se aplica la opacidad al elemento que la declara y A TODOS SUS HIJOS. Mientras que con la segunda declaración esto no pasa.

Como podemos observar hemos definido el color de texto como blanco. En la primera declaración se ve grisáceo porque se le aplica, al texto también, la transparencia. En la segunda al no heredarse la propiedad de transparencia vemos el texto totalmente en su color original.

Esta propiedad es compatible con:

  • Firefox 3.x hacia arriba
  • Safari 3.x hacia arriba
  • Chrome en todas las versiones
  • Opera 10.x hacia arriba
  • Internet Explorer 9

Para Internet Explorer 8 existe un pequeño truco:

/*Hack IE transparente background*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
zoom: 1;
/* [END] Hack IE */