JMiur [E]

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.

6 comentarios:

Andrian Mauricio  

Buenísimo. Una vez me topé con este problema y opté por usar un PNG de 1x1px de un color determinado con la transparencia que yo quería.
Los ejemplos está buenos pero creo que lo más usual al enfrentarnos a este tipo de problema es intentar que el fondo sea transparente pero el texto no.

Saludos.

Responder
egoloco  

Si no me equivoco, hay un ejemplo en Esta entrada tuya. Muy útil. Saludos.

Responder
Graciela  

Un encanto, entendible, merece un aplauso Sr. Jorge
Buen lunes :P

Responder
JMiur  

Andrian: Pués, es lo que miuestra elejemplo. Simplemente, quita el color de fondo y el texto se verá perfectamente sobre el fondo transparente.

egoloco: No, ahi no lo he utilizado; no hay transparencias en el fondo.

Graciela: Espero que le sirva :D

Responder
Gem@  

Buen dato y buenos ejemplos :)

Responder
JMiur  

Gem@: Eso de usar posiciones relativas y absolutas es un gran invento :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR