Como evitar la herencia

[kendall00]

Hola, mi duda es como puedo evitar que se herede la transparencia aquí el codigo:

Código CSS:

#pup {
    top:0%; bottom:0%; right:0%; left:0%; visibility:hidden; position:fixed; z-index:99; background-color:#666;
}
#form_pup {
    margin-top:5%; margin-right:20%; margin-left:20%; width:60%; position:fixed; background-color:#FFF; color:#000; opacity: 1 !important;padding:1%;
}
 

Código HTML:

<div id="pup">
<div id="form_pup">
<div align="right"><a  id="hide_pup" href="#" onclick="pup_hide(1)">Ocultar</a></div>
<div id="content_pup"><center>Este contenido se cargar&aacute; automaticamente!<br /><img src="files/imagenes/load.gif" width="50" height="50" alt="cargando" /></center></div>
</div></div>
 

Código Javascript:

function pup_show(id,msj){
    document.getElementById('pup').style.visibility = "visible"
    for (x = 1; x<50; x++){
        function up(){
            document.getElementById('pup').style.opacity = "0."+x   
        }
        setTimeout(up,1000);
    }
///El codigo sigue pero no importa
}
 

El div de adentro se ve igual de transparente que el contenedor como evito eso gracias.

[memoadian]

Que yo sepa no se puede.

Si pones un div transparente, su contenido igual, tendrás que buscar otra solución.

A ver si alguien sabe algo diferente.

[pzin]

No se puede evitar la herencia de opacity. No sé qué lógica extraña siguieron para hacer que eso sea así la verdad.

Si lo quieres para tener un fondo transparente, para arreglarlo, suelen emplearse tres métodos.

• Usar un PNG semitransparente y usarlo como fondo.
• Crear dos elementos que sean hermanos. El primero con la opacidad que se quiera tener, y el segundo in ella. Luego el segundo se posiciona encima del primero.
• Usar rgba() o hsla() para el un color de fondo transparente.

La última opción es la menos liosa y la que yo usaría. Soportada por todos los navegadores actuales.