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.
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.
Para poner color en CSS utilizamos la función rgba():
<div style="background-color: rgba(255, 0, 0, 0.5)">………</div>
Nota: Esta función no es reconocida por Internet Explorer ni por Opera 9, pero sí por Opera 10.
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