Unas palabras de agradecimiento nunca están de más.

Crear una DIV con trasparencia

Última actualización: 18 de septiembre de 2009 a las 22:45 por Carlos Villagómez.

¿Deseas crear una DIV transparente? Esto muy sencillo, tan solo tienes que utilizar una de las técnicas CSS:

Volver la DIV y su contenido transparente

La div y su contenido serán transparentes, imágenes y texto.

<div style="filter:alpha(opacity=50); opacity:0.5;">........</div>

La propiedad opacity es compatible con firefox 3+, Chrome 2+, Safari 4 (3 no ha sido probado) y Opera 10. La propiedad filter:alpha(opacity=50) permite a Internet Explorer 9 (no 7) y Opera 9.x crear la transparencia.

Volver la DIV transparente pero no el contenido

Utilizar la futura propiedad "rgba" de CSS

Para poner color en CSS, utilizamos la propiedad rgb(). Pronto podrá ser utilizada la función rgba(). La “a” es el canal alfa, la transparencia:

<div style="background-color: rgba(255, 0, 0, 0.5)">………</div>

Aquí el color será rojo transparente.
Este función no es reconocida por Internet Explorer ni por Opera 9.x (pero si por Opera 10).

Truco

Tomamos una <div> contenedor de texto e imágenes. Dentro, ponemos una div abierta y la cerramos inmediatamente. Vacía. Esto es lo que permite volver el fondo transparente, sin afectar al texto. La DIV vacía será estirada al borde de la DIV contenedor pero detrás de ésta.

Ejemplo:

<div style="position: relative; z-index: 10;">
   <div style="	background-color: #f00; position:absolute; z-index:-1; top:0; left:0; right:
0; bottom:0; opacity:0.2;"></div>
   ……
   ……
</div>

Si la primera DIV posee un posicionamiento relativo, es para poner la z-index
La div que permite la transparencia posee el posicionamiento absoluto y está a 0 px de cada borde para que recubra la primera DIV y una z-index de -1 para ponerla bajo la primera.