[SOLUCIONADO] opacidad a todos los elementos menos uno

[andrinson]

hola es que tengo un iframe dentro de una seccion y quiero que la opacidad de toda la web sea menor que la de el iframe pero el problema es que al quitarle opacidad a la seccion se le quita opacidad tambien al iframe
codigo html:

Código HTML:

<section class="contenedor-principal">
<iframe src="" class="iframe" id="iframe"></iframe>
</section>
 

codigo css:

Código CSS:

.contenedor-principal{
    width:77%;
    height:60em;
    float:right;
    background-color:red;
    margin:5em 1em 0 0 ;
        opacity:0.5;
}
 
.iframe{
    width:45em;
    height:45em;
    background-color:white;
    margin-left:8em;
 
}
 

espero que me entiendan :´v

[g3kdigital]

Ese es el comportamiento de opacity, afecta al contenedor y al contenido, una vez declarado en un padre un hijo no puede deshacerlo.

Sin embargo, creo que lo quieres lograr es que solo el color de fondo, sea transparente, en ese caso te insto a investigar sobre los colores rgba, donde con un canal alfa puedes jugar con la opacidad únicamente del color, ejemplo:

background: rgba(255,0,0,0.5);

Te da un color rojo con una transparencia al 50% de fondo. El ultimo valor, es la cantidad de transparencia y va desde el 0 al 1. Espero que sea esto y sino, nos escribes.