jun
28
2009

Opacidad con css [+FIX]

An article by miguelortega

Opacidad con css y fix para no heredar lo opaco

Ahora veremos como agregar opacidad con CSS a nuestros elementos… HTML, simplemente agregamos

1
2
3

-moz-opacity:.5;	/*Para Firefox, opera y similares*/
opacity:.5;/*Para IE8*/
filter:alpha(opacity=50);/*Para el resto de IE*/

Y simplemente variamos los numeros a nuestro antojo, y asi alcanzar el tono deseado de opacidad. Claro tendriamos que agregarle un color de fondo o una imagen si queremos para ver el efecto opaco… con mas claridad (chiste)

1	background:#000;

Listo pero que pasa!!! todo el div incluso todo lo que hay dentro de el se puso opaco… y pocos queremos eso la verda… asi que aqui viene… mas que un fix… una solucion diferente pero la correcta.

Fix para no “Heredar opacidad CSS”

crearemos un div con posicion relativa y dentro de este crearemos un div con nuestro contenido (que no queremos que herede opacidad) en posicion absoluta y luego el div que tendra el color de fondo y la opacidad que estara debajo para dar este efecto correctamente.

<div class="confix">
<div class="sin_opacidad">esto sera nuestro contenido sin opacidad</div>
<!--esto sera nuestro div con opacidad-->
<div class="contenido"></div>
</div>

Y con este CSS

/*Div CON FIX*/
.contenido, .sin_opacidad{font-size:20px;color:#FF0;}
.confix{width:350px;height:200px;margin:10% 50px 0 0;float:left;
		/*Importante*/
		position:relative;/*Importante para el FIX*/
	}
/*Div con opacidad Fix*/
.confix .contenido{width:100%;height:100%;padding:10px;
		/*Importante*/
		background:#000;
		-moz-opacity:.5;	/*Para Firefox, opera y similares*/
		opacity:.5;	/*Para IE8*/
		filter:alpha(opacity=50);/*Para el resto de IE*/
	}
/*Div posicion absoluta FIX*/
.sin_opacidad{
		/*Importante*/
		position:absolute;
		z-index:1;
		top:10px;
		left:10px;
	}

Y listo opacidad + fix…
NOTA:No es válido para W3C. -moz-opacity y opacity hasta CSS3 si.

Ver el ejemplo en linea

Etiquetas: CSS, efecto, firefox, fix, heredar, ie6, opacidad, opacity, solucion

About the Author: Miguel Angel Ortega Acosta

8 Comments + Add Comment

Zamus 22 febrero 2011 a las 18:48

Solo funciona si conoces y fijas la altura del div .confix

No funciona con contenido variable… :S
jorge 27 agosto 2010 a las 18:33

y la gente con el chrome viejo que hace sin -webkit-opacity? ja
Miguel Ortega 15 febrero 2010 a las 0:56

Muy buen tema
Alex Aguiar 18 enero 2010 a las 20:08

claro que existen pero tambien existen propiedades como “opacity” CSS3 que estos navegadores que mencionas las aceptan y no necesitan -webkit…
de hecho FF ya no necesita “-moz-opacity” con “opacity” vale
pero igual existen gente tonta pero que se le va a hacer saludos!

NOTA:No es válido para W3C. -moz-opacity y opacity hasta CSS3 si.

AVER SI LEEMOS CSS3 coleguita
Gonzalo 18 enero 2010 a las 10:22

Te falto el -webkit-opacity, ya que chrome y safari tambien existen.
Yo 19 septiembre 2009 a las 22:55

Carajo, buenísimo!

Llevaba horas buscando esta información y solo aquí la pude encontrar.

Muchas gracias!
Alex Aguiar 28 junio 2009 a las 22:15

yeah… hola jorge… :’( que honor jaja… gracias… aver k pasa… estamos intentando para esto sirvio tu dolar jeje… nah… frogx3.com es dios… ademas es de diseño aqui se vera pero muy poco es mas a Codigos… pero bueno gracias por la visita… aver k pasa… chao!…
jorge 28 junio 2009 a las 21:41

Hey felicidades por el blog escelente la tematica, mucha suerte con el proyecto que le hechen ganas… ;)

P.D. No le copien a frogx3.com o los demando con google jajaj, no es cierto que se la pasen leve…