Contenedores y contenidos: Opacidad

Controlar o modificar la opacidad de cualquier elemento es una de las técnicas más comunes ya que pueden implementarse en todos los navegadores modernos con leves variaciones:

filter:alpha(opacity=VALOR); en Internet Explorer
opacity: VALOR; en el resto de los navegadores

El problema con esta propiedad es que si la aplicamos a un contenedor, todo el contenido es afectado, es decir, si queremos poner un DIV con una imagen de fondo y usar opacity para hacerla transparente, todo lo que agreguemos dentro de ese DIV también será transparente.

Un ejemplo:

<style type="text/css">
#ejemplo1 {
background: transparent url(URL_imagen) no-repeat 50% 0;
color: #FFF;
height: 280px;
margin: 20px auto;
padding: 20px;
text-align: center;
width: 420px;
filter: alpha(opacity=40);
opacity: 0.4;
}
#textoejemplo1 {
background-color: #ABC;
padding: 5px;
}
</style>

<div id="ejemplo1">
<div id="textoejemplo1">
....... un texto cualquiera .......
</div>
</div>

Suspendisse a nulla et quam vehicula mattis at vitae sapien? In hac habitasse platea dictumst. Etiam diam ipsum, suscipit ut semper vel, vulputate eu justo? Nunc condimentum quam sed urna fermentum eu commodo massa tempor. In ligula turpis, adipiscing vitae scelerisque in, iaculis quis mi. Nam sodales interdum tincidunt.

El DIV ejemplo1 tiene una imagen de fondo y se le aplica opacidad así que el DIV textoejemplo1 que está dentro, también es transparente ya que las propiedades, se heredan.

Si lo que queremos hacer es que ese contenido no sea trasparente, debemos cambiar la técnica.

Cuando tenemos un contenedor al que le colocamos la propiedad position con un valor relative, podemos controlar la posición del contenido, agregándole a este, la propiedad position con un valor absolute y ubicándolo con top right bottom y left. Unos ejemplos:

<div style="position: relative;">
<div style="position: absolute; left: 20px; top: 10px;"> ... </div>
<div style="position: absolute; bottom:10px; right: 20px;"> ... </div>
</div>

left:20px;top:10px;

bottom:10px;right:20px;

left:0px;top:10px;

bottom:0px;right:30px;

Con esa misma idea, es posible tener un DIV con una imagen transparente y encima, colocar otro que no se vea afectado por esa propiedad.

<style type="text/css">
#ejemplo2 {
color: #FFF;
height: 320px;
margin: 20px auto;
overflow: hidden;
position: relative;
text-align: center;
width: 420px;
}

#internoejemplo2 {
background: transparent url(URL_imagen) no-repeat 50% 0;
height:320px;
width:420px;
filter: alpha(opacity=40);
opacity: 0.4;
}

#textoejemplo2 {
background-color: #ABC;
padding: 5px;
  position: absolute;
top: 20px;
left: 10px;
overflow: hidden;
}
</style>

<div id="ejemplo2">
<div id="internoejemplo2"></div>
<div id="textoejemplo2">
....... un texto cualquiera .......
</div>
</div>

Suspendisse a nulla et quam vehicula mattis at vitae sapien? In hac habitasse platea dictumst. Etiam diam ipsum, suscipit ut semper vel, vulputate eu justo? Nunc condimentum quam sed urna fermentum eu commodo massa tempor. In ligula turpis, adipiscing vitae scelerisque in, iaculis quis mi. Nam sodales interdum tincidunt.

Ahora, tenemos un DIV contenedor llamado ejemplo2 igual que antes pero, la imagen de fondo no está allí. Dentro de este, hay dos DIVs más. El que identificamos como internoejemplo2 es el que contiene la imagen y el otro, llamado textoejemplo2, es el que contiene el texto y es el que podemos posicionar a voluntad.