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

Question

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

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) 结果？

Answer 1

你的结论有误。第二个梯度的插值将给出 (255, 0, 0, 0.5) 而不是 (127.5, 0, 0, 0.5)

的中心着色

和 (0, 0, 255, 1) 顶部的 (255, 0, 0, 0.5) 将给出 (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

有关数学的更多详细信息：

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?