Si te fijas en las ventanas, persianas y cortinas de una casa, verás que algunas ventanas como las de los cuartos de baño son de cristal pero no son transparentes, dejar ver el exterior pero no de forma nítida. Cuando se bajan las persianas, no se ve absolutamente nada del exterior, y las cortinas, dependiendo de su tejido, pueden dejar pasar la claridad en mayor o menor medida.
La opacidad es una característica de los elementos que nos permite mostrar o no otros elementos que tengan por debajo. Para conseguir efectos de transparencia en algunos elementos tienes las siguientes propiedades: opacity, moz-opacity y filter.
opacity
Esta propiedad, que es compatible con todos los navegadores que soporten CSS3, permite asignar valores comprendidos entre 0 (invisible o totalmente transparente) y 1 (totalmente opaco).
-moz-opacity
Esta propiedad, permite asignar los mismo valores que la propiedad anterior. La diferencia está en que sólo es compatible con versiones anteriores del Firefox 0.9.
filter
Esta propiedad, de IE (5.5 y siguientes), tiene varios efectos: degradaciones, desenfocados, sombras, etcétera. Para lograr la transparencia hay que aplicar el filtro alpha, con valores entre 0 y 100.
En el ejemplo siguiente tienes el código donde se configura la opacidad de algunos elemento para que funciones en todos los navegadores.
Ejemplo:
<html> <head> <style type="text/css"> body { background: #00f; color: black } #saludo { background: white; width: 200px; height: 200px; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } #frase { background: white; width: 200px; height: 200px; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #despedida { background: white; width: 200px; height: 200px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; } </style> </head> <body> <div id="saludo"> <h1>¡Hola!</h1> </div> <div id="frase">Este es un ejemplo de opacidad</div> <div id="despedida"> <h2>¡Adiós!></h2> </div> </body> </html>