你如何计算重叠的 rgba 值？答案

【问题标题】：How do you calculate overlapping rgba values?你如何计算重叠的 rgba 值？
【发布时间】：2013-06-04 06:58:37
【问题描述】：

假设我有这个：

.example { 

  background-color: rgba(0, 0, 0, 0.5); 
  border-color: rgba(0, 0, 0, 0.5);

}

background-color 和border-color 具有相同的rgba 值，但颜色不同，因为border-color 是在background-color 之上计算的。

边框颜色的透明度值会使其与背景颜色匹配？这里的数学是什么？

编辑：谢谢大家，对于我的第一个示例，使用 rgba(0, 0, 0, 0) 或透明度就足够了，但我仍然有问题。 (http://jsfiddle.net/CPK7L/2/)。在这种情况下，我需要将第一个元素的边框颜色与第二个元素的边框颜色相匹配。

那么如何根据第二个元素的 alpha 值计算第一个元素边框的 alpha 值呢？

【问题讨论】：

标签： html css rgba

【解决方案1】：

如果您将边框 Alpha 通道设置为 0，它将与背景颜色匹配。这是对基础颜色不做任何修改的地方；这是transparent 模式。

要计算 alpha 通道的总和，基本上是：

alpha-channel of border * (1 - alpha-channel of background) + alpha-channel of background

所以边框实际上具有0.5 * (1 - 0.5) + 0.5 = 0.5 * 0.5 + 0.5 = 0.25 + 0.5 = 0.75 的 alpha 通道值。

【讨论】：

【解决方案2】：

边框颜色的透明度 (alpha) 值为 0 将使其与背景颜色匹配。见：http://en.wikipedia.org/wiki/RGBA_color_space

.example {
    display: inline-block;
    padding: 50px;
    background: rgba(0, 0, 0, 0.5);
    border: 25px solid rgba(0, 0, 0, 0);
}

【讨论】：