Crear una DIV con trasparencia

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.

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.

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 recubrir la primera DIV. Vemos una z-index de -1 para ponerla debajo de la primera.

Foto: © Everypixel