CSS背景颜色组合答案

【问题标题】：css background color compositionCSS背景颜色组合
【发布时间】：2016-11-26 03:44:11
【问题描述】：

不知道为什么中间那段的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)。

下面绘制的类为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/

【问题讨论】：

标签： css

【解决方案1】：

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

【讨论】：

【解决方案2】：

嗯，如果我正确理解您的问题，您想知道如何从这两种颜色中生成 (217, 217, 166)。

蓝色上有黄色图层
黄色比蓝色层有 70% 的不透明度
蓝色层在白色背景上的不透明度为 50%
然后您需要选择黄色（不是您计算的那个，而是 (255, 255, 0)），然后就可以了：

COLORS WHITE BLUE YELLOW RESULT R: 255*0,5*0,3 + 0*0,5 + 255*0,7 = 216,75 ~ 217 G: 255*0,5*0,3 + 0*0,5 + 255*0,7 = 216,75 ~ 217 B: 255*0,5*0,3 + 255*0,5 + 0*0,7 = 165,75 ~ 166

【讨论】：

根据我从Alpha blending rule 读到的规则，当它产生（217、217、166）时，不应该考虑蓝色？？另外，右边和下面的其余颜色怎么样？根据您的解释，它应该是 (255*0.5+0*0.5, 255*0.5+0*0.5, 255*0.5+255*0.5) 和 (255*0.3 + 255*0.7, 255*0.3 + 255*0 ,7, 255*0.3 + 0*0.7)??