transparencia solo a fondo

el_cesar · #1 (**permalink**) 22/06/2011, 11:06

tengo estos estilos

Código CSS:

Ver originalbody {
background-color: #CED8F6;
background-image:  url("el-everest.jpg");
background-repeat:no-repeat;
background-position:center;
background-attachment: fixed;
text-align: center;
} 
.contenedor{
width: 600px;
margin: 0 auto 0 auto;
background-color: #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior:url(border-radius.htc);
opacity: 0.6;
filter:alpha(opacity=60);
}
 
 
.head{
 
width: 292px;
height: 150px;
}

que aplico a este html

Código HTML:

Ver original<html>
<head>
<title>Bienvenido a la red Optimus ..::Organizacion de Servicios Everest S.A.S. ::..</title>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
</head>
<body>
<div class="contenedor">
<div class="head"><img src="http://organizacioneverest.com/sitio/templates/businessblue/images/header-object.png" width="292" heigth="150" /></div>
</div>
</body>
</html>

como ven, quiero darle una transparencia a "contenedor" para que se siga viendo el fondo, todo funciona bien, pero cuando pongo el div "head" dentro de "contenedor" para poder maquetar y conservar el orden, a "head" tambien le aplica transparencia, mi pregunta es: ¿como puedo lograr que la transparencia solo se le aplique a "contenedor" y los divs que esten dentro de el no se vean afectados?

gracias

jluisfg · #2 (**permalink**) 22/06/2011, 11:32

puedes hacer una de dos cosas. Una es meter otra div dentro de "contenedor" a la que le apliques una opacidad de 1. La otra es un poco mas compleja, haz un png en photoshop de 1px x 1px que sea del color y la transparencia que querias. Despues lo pones en CSS como background y poner transparent y debe funcionar.

Saludos

rossijona · #3 (**permalink**) 22/06/2011, 12:09

Te recomiendo usar un png con una opacidad de aprox 50% (dependiendo de lo que quieras lograr) y aplicarle este png como fondo al contenedor.

el opacity no funciona en todos los navegadores.

P.D.: no es necesario agregarle propiedad transparent al contenedor para que funcione (el mismo png ya tiene su transparencia.)

el_cesar · #4 (**permalink**) 22/06/2011, 12:46

pero al poner como fondo un png si lo toma el IE? porque hasta donde he leido ie no soporta transparencias con png

cristian_cena · #5 (**permalink**) 22/06/2011, 14:17

el png transparente va en IE7+ para ie6 podes usar la librería js-ie7. o mejor aún redireccionar a una página que diga "este navegador es una mierda". XD saludos.

rossijona · #6 (**permalink**) 22/06/2011, 14:55

Cita:

Iniciado por cristian_cena

el png transparente va en IE7+ para ie6 podes usar la librería js-ie7. o mejor aún redireccionar a una página que diga "este navegador es una mierda". XD saludos.

jajajajaj, es verdad...

Yo ya no estoy usando el js para los png si siguen usando i.e NOOOOO jaja