Opacidad de capa

Abite · #1 (**permalink**) 16/02/2007, 04:45

Hola,
estoy intentando hacer que el web entero se vuelva transparente, para ello estoy haciendo lo siguiente:

Código PHP:

  function opacidad(){

   document.body.className = 'opacidad_on';

}

y el css:

Código PHP:

  .opacidad_on{

filter: alpha(opacity=30); opacity: .3

}

El tema es que funciona, pero el problema me llega por otro lado, quiero que aunque el body tenga transparencia en primer plano tenga un <div> sin transparencia, el div en cuestión tiene asociada la siguiente clase:

Código PHP:

  .comentario{

    position:absolute;

    background-color:#FFFFFF;

    border:5px solid #CCC;

    width: 500px;

    top: 20%;

    left: 30%;

    filter: alpha(opacity=100); 

    opacity: 1;

}

Con con explorer funciona perfectamente, y me muestra el div sin transparencia, pero en firefox me lo muestra transparente igual que el body, ¿alguna idea?

Shade · #2 (**permalink**) 16/02/2007, 06:15

mmm crea un div que ocupe toda la pagina y sea ese div al cual le das la transparencia. Porque si le das al body la transparencia todos los elementos dentro del body van a ser asi si no me equivoco (al menos para Firefox)

Abite · #3 (**permalink**) 16/02/2007, 11:50

pues que raro, porque lo he cambiado y le he dado la transparencia al div, y ahora me funciona en firefox y no en explorer, jejeje.

Lo he solucionado de forma provisional de esta forma:

Código PHP:

  function opacidad(tipo){

    var navegador = navigator.appName 

    if (navegador == "Microsoft Internet Explorer"){

        if(tipo == 0){

            document.body.className = 'opacidad_off';

        }else{

            document.body.className = 'opacidad_on';

        }

    }else{

        if(tipo == 0){

            document.getElementById("efecto").className = 'opacidad_off';

        }else{

            document.getElementById("efecto").className = 'opacidad_on';

        }

    }

}

Si alguien tiene alguna forma de hacerlo sin javascript y sin tener que hacer diferencia entre navegadores...

Mikmoro · #4 (**permalink**) 16/02/2007, 16:06

Hola, Abite.
Creo que esto te podrá servir de referencia.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>solicion alternativa</title>
  <style type="text/css">
html, body { width: 100%;
height: 100%;
}
.encima, .debajo { border: 5px solid rgb(204, 204, 204);
width: 500px;
left: 30%;
top: 20%;
opacity: 1;
background-color: rgb(255, 102, 0);
position: relative;
}
.encima {z-index: 2;
}
.debajo {z-index: 0;
}
.opacidad_on {
filter: alpha(opacity=30);
opacity: .3;
background-color: rgb(102, 51, 255);
width: 100%;
height: 100%;
position: absolute;
top: 0pt;
left: 0pt;
z-index: 1;
}
  </style>
</head>
<body>
<div class="opacidad_on"></div>
<div class="encima">
<p> Esta caja deber&iacute;a quedar encima de la opacidad</p>
<br />
<br />
</div>
<br />
<div class="debajo">
<p> Esta caja deber&iacute;a quedar debajo de la opacidad</p>
<br />
<br />
</div>
</body>
</html>

Mikel.

sjam7 · #5 (**permalink**) 16/02/2007, 16:27

esta interesante esto, oye, tienes tu web para ver esto funcionando?

Mikmoro · #6 (**permalink**) 16/02/2007, 18:30

Hola, sjam7.
No tengo una web donde lo tenga puesto, pero he hecho una muestra en la web que le estoy haciendo a un amigo:

http://www.menoslobos.com/mikel/menoslobos2.html

Pulsa sobre la foto del cocinero para ver el efecto, y otra vez para quitarlo.

A ver si te gusta.

Mikel.

Mikmoro · #7 (**permalink**) 18/02/2007, 16:42

Este otro es un efecto parecido pero justo al contrario, y hecho sólo con css, sin javascript.

http://www.menoslobos.com/mikel/foro.../opacidad.html

Es una sola página hecha para el ejemplo, así qu es más fácil de entender.

Mikel.