Programatik

Después de unas merecidas vacaciones vuelvo con un artículo que describe un par de técnicas para manejar la transparencia mediante CSS.

El problema:

Crear una capa con fondo transparente cuyo contenido sea opaco.

La solución:

El primer intento puede vese en el lab: http://www.rafachacon.com/lab/opacity/alpha/opacity.html. Se puede comprobar que el Firefox el texto de la capa transparente también es transparente. Sin embargo, en Explorer el texto es opaco. Si observamos el código comprenderemos por qué:

<div id="transparent">
<div id="opaque">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum adipiscing arcu id sem.
Fusce fermentum. Vivamus id nisl. Aliquam elementum, lacus in adipiscing placerat, justo odio congue nibh, vitae lacinia ipsum augue ut sem.
Etiam eu purus quis diam rutrum faucibus. Morbi accumsan luctus nisi. Aenean a nisl non mauris varius posuere
 Fusce augue quam, dapibus pulvinar, consequat et, aliquet in, magna. Curabitur lacus odio, malesuada sed, ullamcorper quis, venenatis eu, neque.
Aenean pharetra luctus tellus. Suspendisse potenti. Nulla viverra mattis nisl. Etiam molestie odio sit amet ante. Quisque vehicula lacinia erat.
Vestibulum consequat diam non sem. Duis est est, sollicitudin a, eleifend ut, pharetra ut, neque. Pellentesque volutpat luctus dolor.
</div>
</div>

Y el estilo de cada capa es el siguiente:

#transparent { width: 300px;
 
border: 1px solid #000;
 
background-color: #000;	opacity: 0.5;
 
filter: alpha(opacity=50);
 
-moz-opacity: 0.5;
 
}
 
#opaque {
 
border: 1px solid red;
 
position: relative;
 
}

Colocar en #opaque la regla position: relative; nos ofrece la posibilidad de que el contenido aparezca opaco… solo en Explorer.

Una solución mejor:

Nuestra preocupación es que el contenido se muestre opaco también en Firefox. Al hilo de un artículo de Jamie en Nodstrum, cuya lectura recomiendo, podemos llegar a la siguiente solución (ver ejemplo en el lab: http://www.rafachacon.com/lab/opacity/png/opacity.html):

Usando un png transparente de 1×1px como fondo de la capa, podemos simular la transparencia manteniendo el contenido opaco. Esto también funciona en Explorer 7. Sin embargo, de todos es sabido que Explorer 6 no soporta transparencias en los png. La solución en este caso viene dada por la siguiente hoja de estilos:

#transparent {
	width: 300px;
	border: 1px solid #000;
 
	background: url(blackTransparent80.png);
	_background-image: none;
	_background-color: #000000;
	_filter:alpha(opacity=80);
}
 
#opaque {
	border: 1px solid red;
	position: relative;
}

Donde se indica que para Explorer 6 (que interpreta como válidas las reglas con guión bajo) no se incluya imagen de fondo pero sí un color y una transparencia.

Enlaces