Opacidad en... IE :)

[FantasmaFito]

Si si, tengo problemas con la opacidad en Explorer (cuando no?).

Necesitaría saber como hago para ponerle opacidad a un div pero no a los elementos que tiene dentro ¿me explico? Quisiera que el div tenga una determinada opacidad pero no el texto e imagenes que contiene.

Tengo esto:

Código HTML:

#cabecera{
	background:url("../imagenes/estructura/cabecera.png");
	_filter:alpha(opacity=20);
	width:100%;
	height:115px;
}
#logo{
	background:url("../imagenes/estructura/logo.png");
	width:158px;
	height:157px;
	float:left;
}

El div cabecera adentro tiene el div logo que tiene una imagen. El problema es que al ponerle opacidad al div cabecera, el div logo la hereda. ¿Alguien sería tan amable de darme un consejo para que esto no seceda? Estoy trabado...

[amigo_uy]

intentastes con un especifico "class"

[FantasmaFito]

Sí, y también le puse filter:alpha(opacity=100) al div logo pero nada

[talmente]

Hola, mira aquí

http://www.araudi.net/ejemplos/opacidad.html

http://www.araudi.net/ejemplos/transparencia.html

Cortesia de Mikmoro

[Mikmoro]

Lo que viene a querer decir: si una caja tiene bajada la opacidad, todo lo que haya dentro de ella también lo tendrá. Lo que se puede hacer es usar la posición absoluta para colocar una caja que en realidad está fuera como si estuviera dentro.
En el segundo ejemplo que pone talmente, el primer párrafo (rosa) está dentro y se ve afectado; el segundo (blanco) está fuera, y no se ve afectado.

[FantasmaFito]

Bueno la solución fue ponerle posición relativa a la caja que esta dentro del div con opacidad.

Muchas gracias a todos!

[Mikmoro]

Iniciado por FantasmaFito

Bueno la solución fue ponerle posición relativa a la caja que esta dentro del div con opacidad.

Muchas gracias a todos!

mmm... me parece que no (¿lo has mirado con FF o chrome?), pero bueno, si ti te ha valido ya está bien.

[tiger9992]

Si en tu codigo html o php tienes el div que contiene a las images dentro del div cabecera, una opcion para que no se afecte seria sacar ese div de ahi y ponerlo fuera...
<div id="cabecera">
<div ..>
</div>
</div>
y aqui afuera el div de la imagen...

[destinopolinesia]

yo copie un truco que metí en los iconos del footer d jquerytimelinrcssmod.eu5.org que hace el hover opacity sin css y funciona bien <a href="http://linkedin.com/in/destinporinetia" target="_blank"> <img onmouseout="this.style.opacity=0.7;this.filters.al pha.opacity=70" onmouseover="this.style.opacity=1;this.filters.alp ha.opacity=100" style="opacity: 0.7;" src="linkedin.png" alt="Linkedin" title="Nuestros ins">
</a> y yo creo que funciona en explorer .. en los sociales footer de polinesia2012.com lo metí con css sin embargo y con este efecto css que los mueve un poco y pero no funca en explorer te extraigo el codigo section#footer_content #socials img:hover {
-moz-transform: rotate(-10deg);
opacity: 1;
}