5

¿Por qué funciona cuando el Padre tiene opacity: 1 y el Hijo-1 tiene opacity: 0 y NO cuando el Padre tiene opacity: 0 y el Hijo-1 tiene opacity: 1?

El código siguiente:

.Caja {
  width: 100px;
  height: 100px;
  background: red;
  border: 1px solid black;
  font-size: 32px;
}

.Padre {
  opacity: 1;
}

.Hijo-1 {
  opacity: 0;
}
<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>

11
  • no entiendo en realidad que quieres, quizá mas información, trata de usar la herramienta de stack para mostrar el ejemplo. Commented el 9 mar. 2018 a las 18:34
  • 1
    A que le llamas no funciona? si al padre le pones opacidad 0, nada de lo que contenga el padre va a ser visible. por lo tanto no deberías ver nada. Commented el 9 mar. 2018 a las 18:35
  • Que es lo que se debería mostrar según tu criterio con el padre en cero y el hijo en 1, para que podamos entender como ayudarte. Commented el 9 mar. 2018 a las 18:38
  • Cuando Padre esta en CERO y el Hijo en UNO, pues debe mostrarse solamente el Hijo, pero no se muestra....
    – peruvice
    Commented el 9 mar. 2018 a las 18:48
  • 1
    @peruvice, me parece que estas confundiendo el concepto de cascada con el efecto de las distintas propiedades.
    – Marcos
    Commented el 9 mar. 2018 a las 19:03

2 respuestas 2

5

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>

0
0

La propiedad CSS opacity define:

la transparéncia de un elemento, esto es, en qué grado se superpone el fondo al elemento.

Es decir, se espera es que se vea el fondo del elemento que contiene a Padre. Para lograrlo es necesario que todo lo que contenga Padre también sea transparente en igual grado.

En la documentación en ingles podes encontrar que:

la opacidad se aplica al elemento como un todo, incluido su contenido, aunque el valor no sea heredado por elementos secundarios. Por lo tanto, el elemento y sus elementos secundarios tienen la misma opacidad con respecto al fondo del elemento, incluso si tienen opacidades diferentes entre sí.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.