Cuando aplicas opacidad a un elemento se aplica a dicho elemento y a todos sus elementos hijos, es decir, si ocultas un elemento padre nunca podrás ver al elemento hijo. En cambio, si ocultas al hijo solamente, al estar el padre visible, seguirás viendo al padre aunque el hijo este oculto (pero no verías a sus hijos).
Sería algo similar a si intentas recoger manzanas de un manzano: si hay manzano, podrás recoger manzanas, pero no al revés. Aquí el efecto es el mismo.
Si lo que quieres es quitarle el background al elemento padre, podrías utilizar un color rgba
como fondo al que le puedes poner la transparencia que tiene dicho color.
Ejemplo usando rgba
y con una transparencia de 1 en el padre y 1 en el hijo:
.Caja {
width: 100px;
height: 100px;
background: rgba(255, 0, 0, 1);
border: 1px solid black;
font-size: 32px;
}
.Padre {
background: rgba(255, 255, 0, 1);
}
.Hijo-1 {
opacity: 1;
}
<div class="Padre">
<div class="Hijo-1 Caja">1</div>
<div class="Hijo-2 Caja">2</div>
<div class="Hijo-3 Caja">3</div>
</div>
Ejemplo usando rgba
y con una transparencia de 0 en el padre y 1 en el hijo:
.Caja {
width: 100px;
height: 100px;
background: rgba(255, 0, 0, 1);
border: 1px solid black;
font-size: 32px;
}
.Padre {
background: rgba(255, 0, 0, 0);
}
.Hijo-1 {
opacity: 1;
}
<div class="Padre">
<div class="Hijo-1 Caja">1</div>
<div class="Hijo-2 Caja">2</div>
<div class="Hijo-3 Caja">3</div>
</div>