inheriting parent background color with alpha makes child background color different. why?

Question

When parent is having some background color with alpha(rgba) and child is inheriting parent background color why is child color different from parent?

.parent {
  width: 200px;
  height: 200px;
  background: rgba(2, 107, 227, 0.2);
}

.child {
  width: 100px;
  height: 100px;
  background: inherit;
}

<div class="parent">

  <div class="child"></div>

  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</div>

Why is child background color is different from parent background-color?

Because child lays on the parent - its like you put two layers of colored glass over each other - its darker on the overlays. — Pavel Třupek, Sep 06 '19 at 12:00

Quentin · Answer 1 · 2019-09-06T12:08:12.633

Take two pieces of coloured, transparent plastic. Put one on a sheet of white paper. Put the other on top of it. The result is darker. This is the same effect.

80% of the parent's background colour is rgb(2,107,227) and 20% is whatever its parent is.

80% of the child's background colour is rgb(2,107,227) and 20% of the result of the calculation in the previous paragraph.

div {
  border: solid black 1px;
  border-radius: 50%;
  height: 5em;
  width: 5em;
  position: absolute;
}

.one {
  background: rgba(255, 0, 0, 0.5);
  top: 1em;
  left: 1em;
}

.two {
  background: rgba(0, 255, 0, 0.5);
  top: 1em;
  left: 4em;
}

.three {
  background: rgba(0, 0, 255, 0.5);
  top: 3.5em;
  left: 2.5em;
}

span {
  background: black;
  z-index: -1;
  height: 10em;
  width: 1em;
  position: absolute;
  left: 0em;
  top: 0;
  animation-duration: 3s;
  animation-name: slide;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes slide {
  from {
    left: 0em;
  }
  to {
    left: 9em;
  }
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

<span></span>

inheriting parent background color with alpha makes child background color different. why?

1 Answers1