html – How does CSS opacity work?

Question:

Why does it work when Padre has opacity: 1 and Hijo-1 has opacity: 0 and NOT when Padre has opacity: 0 and Child-1 has opacity: 1 ?

The following code:

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

Answer:

When you apply opacity to an element, it is applied to that element and all its child elements, that is, if you hide a parent element you will never be able to see the child element. On the other hand, if you hide the son only, since the father is visible, you will continue to see the father even if the son is hidden (but you would not see his children).

It would be something similar to if you try to pick apples from an apple tree: if there is an apple tree, you will be able to pick apples, but not the other way around. Here the effect is the same.

If what you want is to remove the background from the parent element, you could use an rgba color as a background to which you can put the transparency that said color has.

Example using rgba and with a transparency of 1 in the parent and 1 in the child:

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

Example using rgba and with a transparency of 0 in the parent and 1 in the child:

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