Foros del Web » Creando para Internet » CSS »

Opacidad de capa

Estas en el tema de Opacidad de capa en el foro de CSS en Foros del Web. Hola, estoy intentando hacer que el web entero se vuelva transparente, para ello estoy haciendo lo siguiente: Código PHP: function  opacidad (){     document . ...
  #1 (permalink)  
Antiguo 16/02/2007, 04:45
 
Fecha de Ingreso: septiembre-2005
Mensajes: 70
Antigüedad: 12 años, 2 meses
Puntos: 0
Opacidad de capa

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{
filteralpha(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;
    
width500px;
    
top20%;
    
left30%;
    
filteralpha(opacity=100); 
    
opacity1;

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?
  #2 (permalink)  
Antiguo 16/02/2007, 06:15
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Opacidad de capa

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)
  #3 (permalink)  
Antiguo 16/02/2007, 11:50
 
Fecha de Ingreso: septiembre-2005
Mensajes: 70
Antigüedad: 12 años, 2 meses
Puntos: 0
Re: Opacidad de capa

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...

Última edición por Abite; 16/02/2007 a las 12:00
  #4 (permalink)  
Antiguo 16/02/2007, 16:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Opacidad de capa

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.
  #5 (permalink)  
Antiguo 16/02/2007, 16:27
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Re: Opacidad de capa

esta interesante esto, oye, tienes tu web para ver esto funcionando?
  #6 (permalink)  
Antiguo 16/02/2007, 18:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Opacidad de capa

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.
  #7 (permalink)  
Antiguo 18/02/2007, 16:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Opacidad de capa

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.
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 08:04.