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

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

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）？

您的结论有误。第二个渐变的插值将给出

（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 

---

关于数学方面的更多细节：

我刚刚调整了你问题的格式以便于阅读（如果你不同意更改，请随意回滚），但请注意，在最后的

rgb（…）

@DavidSaysResinstateMonica之后，你在第二个代码示例中留下了一个结尾

）

，谢谢你的编辑，看起来不错。我不认为结尾

）

缺失，因为最终的

rgb（…）

不在

线性渐变（…）

范围内，这是一个单独的背景规则。