html - 你如何计算重叠的 rgba 值？

Question

假设我有这个：

.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 之上计算的。

（简单示例：http: //jsfiddle.net/BBdB3/）

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

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

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

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

边框颜色的透明度 (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);
}

2 回答 2