Chrome 如何计算透明度颜色？

问题描述

我一整天都在尝试了解 Chrome 是如何计算透明度颜色的。而且我在互联网上看到了相同的线性插值 alpha * forground_color + (1 - alpha) * background_color 公式一千次。如果背景是白色，它就可以工作。但是如果背景不是白色，Chrome 会给我不同的结果值...... 例如：

.bg {
  background-color: #666; /* or rgb(102,102,102) */
  width: 120px;
  height: 120px;
  padding: 10px;
}
.fg {
  background-color: rgba(255,.87);
  width: 100%;
  height: 100%;
}

<div class="bg">
  <div class="fg"></div>
</div>

预期值为 rgb(235,13,13)，但 Chrome 给了我 rgb(236,31,27)。 即使背景为灰色且前景绿色和蓝色分量为 0，结果值为 rgb(236,27)。为什么结果值的绿色和蓝色分量彼此不同？它甚至没有关闭结果值 102 * (1 - .87) = 102 * .13 = 13.26。我尝试了许多其他颜色组合。如果背景不是白色，Chrome 不会线性混合颜色。你能告诉我 Chrome 是如何计算透明度颜色的吗？

解决方法

我刚刚检查了正方形内的颜色值，似乎一切正常。我猜你的项目中有一些额外的颜色，或者你有某种改变颜色的 chrome 插件，例如黑暗阅读器。

bg-color = rgb(102,102,102)
fg-color = rgba(255,.87)

calculations: 
Red: 0.87 * 255 + (0.13) * 102 = 235.11
Green: 0.87 * 0 + (0.13) * 102 = 13.26
Blue: 0.87 * 0 + (0.13) * 102 = 13.26

result:
rgb(235,13,13)