4
Gracias

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

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

4
Gracias

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

Haz una pregunta
Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.
El documento « Crear una DIV con trasparencia » se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.
2 Comentarios

¡Suscríbete a nuestra Newsletter!

Recibe nuestros mejores artículos

¡Suscríbete a nuestra Newsletter!