为什么从 color1 到 color2 的 CSS 线性渐变渲染与在 color2 背景上从 color1 到透明的线性渐变完全相同？答案

【问题标题】：Why does a CSS linear-gradient from color1 to color2 render exactly the same as a linear-gradient from color1 to transparent on a color2 background?为什么从 color1 到 color2 的 CSS 线性渐变渲染与在 color2 背景上从 color1 到透明的线性渐变完全相同？
【发布时间】：2021-04-10 08:25:44
【问题描述】：

可以使用以下方法创建从红色到蓝色的线性渐变：

background: linear-gradient(
              rgb(255,0,0),
              rgb(0,0,255))

创建这个：

如果您改为将红色淡化为透明并将其放在蓝色背景上：

background: linear-gradient(
              rgb(255,0,0), 
              rgb(255,0,0,0)),
            rgb(0,0,255);

结果一模一样：

在第一个示例中，通过线性插值，图像的中心将具有 RGB 值 (127.5, 0, 127.5)。

在第二个示例中，图像的中心是部分透明的红色 (127.5, 0, 0, 0.5) 和纯蓝色 (0, 0, 255) 的组合。这些如何组合以创建与第一个示例相同的 (127.5, 0, 127.5) 结果？

【问题讨论】：

我刚刚调整了您问题的格式以提高可读性（如果您不同意这些更改，请随时回滚），但请注意，您在第二个代码示例中留下了结束 ) ，在最后的rgb(...)之后。
@DavidsaysreinstateMonica 感谢您的编辑，看起来不错。我不认为缺少结束 ) 因为最终的 rgb(...) 不在 linear-gradient(...) 范围内，它是一个单独的背景规则。

标签： css colors background linear-gradients

【解决方案1】：

你的结论有误。第二个渐变的插值将给出(255, 0, 0, 0.5) 而不是(127.5, 0, 0, 0.5) 的中心颜色

(255, 0, 0, 0.5) 在(0, 0, 255, 1) 的顶部会给出(127.5, 0, 127.5)

    255*0.5 + 0*(1 - 0.5) = 127.5
    0*0.5   + 0*(1 - 0.5) = 0 
    0*0.5   + 255*(1 - 0.5) = 127.5

这里有更多关于数学的细节：Color of stacked semi-transparent boxes depends on order?

【讨论】：