继承带有alpha的父背景颜色会使子背景颜色不同。为什么？

Question

使用alpha继承父背景颜色会使子背景颜色不同。为什么？

当父级具有某种带有alpha（rgba）的背景色并且子级继承父级背景色时，为什么子级颜色与父级不同？

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

为什么子背景颜色与父背景颜色不同？

Answer 1

取两块彩色的透明塑料。将一个放在一张白纸上。将另一个放在上面。结果更暗。这是一样的效果。

---

父母的背景颜色

80％是docker run -it --rm -p 3389:3389 sample:dev ，而父母的 则是20％。

孩子的背景色中有80％是rgb(2,107,227)，而上一段中的计算结果是20％。

---

rgb(2,107,227)

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;
  }
}