Cómo crear una DIV transparente con CSS

Cómo crear una DIV transparente con CSS

El elemento DIV es empleado como contenedor de bloque en HTML. Tiene como propósito dar un estilo concreto a la página web y facilitar su organización. ¿Deseas crear una DIV transparente? Tan solo tienes que utilizar una de las técnicas CSS que te enseñamos en este artículo.

¿Cómo volver la DIV y su contenido transparente?

Con esta línea de código 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, Chrome, Safari y Opera e IE.

¿Cómo volver la DIV transparente pero no su contenido?

Utilizar la propiedad "rgba" de CSS

Para poner color en CSS utilizamos la función rgba():

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

El color en este ejemplo será rojo transparente.

Nota: Esta función no es reconocida por Internet Explorer ni por Opera 9, pero sí por Opera 10.

Truco

Tomamos un DIV como contenedor de texto e imágenes. Una vez dentro hacemos otra división (vacía) y la cerramos inmediatamente. Esto permitirá volver el fondo transparente sin afectar al texto.

Veámoslo con un 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>

Cuando la primera DIV posee un posicionamiento relativo debemos saber que ello es para poner la z-index.

La DIV que permite la transparencia posee el posicionamiento absoluto y está a 0 px de cada borde a fin de cubrir la primera DIV. Vemos una z-index de -1 para ponerla debajo de la primera.

Webmaster