Cómo hacer una DIV transparente con CSS: fondo, contenido...

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 con un background transparente pero no el contenido? 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?

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. Ten en cuenta que esta función no es reconocida por Internet Explorer ni por Opera 9, pero sí por Opera 10.

• Otra opción es tomar 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. 

¿Cómo hacer una DIV transparente en Bootstrap?

Bootstrap es un marco de diseño web de código abierto que facilita la creación de sitios web y aplicaciones móviles receptivos. Se basa en HTML, CSS y JavaScript. Para hacer un div transparente en Bootstrap, puedes usar la propiedad 'opacity' de CSS. Por ejemplo:

.transparent-div {

    background-color: #000000;

    opacity: 0.5;

}

En este caso, '.transparent-div' tiene un fondo negro con una opacidad del 50%. Bootstrap 4 y 5 también proporcionan clases de utilidad para manejar la transparencia, como '.bg-transparent' para un fondo transparente y clases de opacidad (solo en Bootstrap 5) como '.opacity-50' para una opacidad del 50%.