Crear una DIV con trasparencia

¿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.

Consulta también

Artículo original escrito por jad05. Traducido por Carlos-vialfa. Última actualización: 18 de septiembre de 2009 a las 22:45 por Carlos-vialfa.

Webmaster - Adaptar una página Web a diferentes resoluciones

Cambiar el aspecto del cursor con CSS