Foros del Web » Creando para Internet » CSS »

Opacidad para elementos superpuestos

Estas en el tema de Opacidad para elementos superpuestos en el foro de CSS en Foros del Web. Hola, Tengo una duda de novato con esto de la opacidad. El caso es el siguiente: Cita: <div id="cabecera"> <div id="logo"> <span id="logo_t">Mi texto</span> <span ...
  #1 (permalink)  
Antiguo 12/08/2010, 02:20
 
Fecha de Ingreso: julio-2010
Mensajes: 7
Antigüedad: 7 años, 4 meses
Puntos: 1
Opacidad para elementos superpuestos

Hola,

Tengo una duda de novato con esto de la opacidad. El caso es el siguiente:

Cita:
<div id="cabecera">
<div id="logo">
<span id="logo_t">Mi texto</span>
<span id="logo_i"><img src="images/mi_imagen.png"/></span>
</div>
</div>
Y este sería el código CSS:

Cita:
#cabecera{
float:left;
position:relative;
filter:alpha(opacity=1);
-moz-opacity:.1;
opacity:.1;
background-image:url(../images/banner_sup.jpg);
margin-top:10px;
margin-left: 15%;
width: 70%;
}

#logo_t{
float:left;
font-size: 28px;
text-shadow: 8px 8px 8px #B5B5B5;
color: #F8FFFF;
margin-top:35px;
margin-left:20px;
position:relative;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}

#logo_i{
float:right;
padding: 5px 10px 5px 0px;
position:relative;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
Bueno, pues lo que yo quiero es que la imagen de fondo de #cabecera tenga un poco de opacidad(transparencia), pero que dicha transparencia no afecte a los contenidos de los otros dos divs. He estado buscando y en principio debería funcionar. He probado también a superponer los divs en diferentes capas con z-index, pero en todos los casos no funciona como quiero. ¿Qué tengo mal? ¿No puedo dar opacidad a un elemento contenedor sin que afecte a otros elementos que estén dentro de él?

Muchas gracias de antemano por las respuestas.
  #2 (permalink)  
Antiguo 12/08/2010, 02:39
 
Fecha de Ingreso: julio-2010
Mensajes: 7
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: Opacidad para elementos superpuestos

Pues me voy a responder yo mismo porque le he seguido dando vueltas y he encontrado una solución (posiblemente un poco chapucera) que funciona tanto en Firefox como en Chrome.

Lo que he hecho ha sido añadir un <div> adicional y posicionarlo con position:absolute; justo encima del div #cabecera y con un z-index inferior.

Mi única duda, es si en distintas resoluciones (por ejemplo un portátil) se verá bien o se descuadrará el div colocado con position:absolute

¿Qué os parece la solución?

Etiquetas: elementos, opacidad, superpuestos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:08.