css 背景颜色构成

Question

不知为什么中间那一段的rgb值会出现(217, 217, 166) See this color .

其余结果我能理解。

右侧绘制的类为a的div的背景颜色来自这个等式。

(0 * 0.5 + 255 * 0.5, 0 * 0.5 + 255 * 0.5, 255 * 0.5 + 255 * 0.5) 并进行一些汇总，得到 (128, 128, 255)。

下面画的class为b的div的背景色就是由这个等式得出的。

(255 * 0.35 + 255 * 0.65, 255 * 0.35 + 255 * 0.65, 0 * 0.35 + 255 * 0.65)，结果为 (255, 255, 166)。

<div class="a">
  <div class="b">
  </div>
</div>

.a {
  background-color: blue;
  width: 300px;
  height: 100px;
  opacity: 0.5;
}    
.b {
  background-color: yellow;
  width: 100px;
  height: 200px;
  opacity: 0.7;
}

https://jsfiddle.net/xL73t8qj/

Answer 1

由于不透明度，中间部分的 rgb 值显示为 (217, 217, 166)。
由于顶部的 div(具有 b 类)的不透明度设置为 0.7。然后它变得有点透明并且 div(具有 a 类)开始变得可见。两种颜色混合后输出为 rgb(217, 217, 166)。