为什么这个渐变不能在 Chrome 上正确呈现？答案

【问题标题】：Why this gradient is not properly rendering on Chrome?为什么这个渐变不能在 Chrome 上正确呈现？
【发布时间】：2021-05-03 13:52:02
【问题描述】：

我使用 CSS 向<div> 添加了一个简单的线性渐变。由于某种原因，它无法在 Chrome 上运行，但在 Safari 上运行良好。

CSS 规则如下所示：

background-color: #043a5f;
background-image: linear-gradient(180deg,#043a5f,rgba(30,113,212,0));
background-position: top;
background-repeat: no-repeat;
background-size: 100% 400px;

预期的结果是深蓝色背景上的浅蓝色渐变。在下图中，左侧是 Safari（看起来不错），右侧是 Chrome。

这里有一个小提琴来证明：https://jsfiddle.net/straube/13rsq9y4/

P.S.：我在 MacOS 10.15.7 上运行 Chrome 88.0.4324.96 和 Safari 14.0（15610.1.28.1.9、15610）。

【问题讨论】：

标签： css google-chrome linear-gradients

【解决方案1】：

实际上，这可能是一个 Safari 错误。 rgba(30, 113, 212, 0) 与rgba(12, 34, 56, 0) 的“颜色”相同（例如），因为只有一种“颜色”具有 alpha 值0：transparent“颜色”。

因此 Chrome（和 Firefox）试图在 #043a5f（背景颜色，实际上不可见）和 transparent（实际上不可见）之间进行插值。因为transparent 没有色调，所以在整个渐变过程中唯一变化的变量是 Alpha 通道值。

您可以在渐变中指定三个步骤来获得所需的结果：

background-image: linear-gradient(180deg, transparent, rgb(30 113 212), transparent);

【讨论】：

有道理。但是，我故意希望它进行 2 次插值：从颜色 A 到 B AND 从不透明（不透明度：1）到透明（不透明度：0）。这就是我在 Safari 上得到的。但我知道这可以由浏览器开发人员解释。
顺便说一句，设计工具——比如 Figma——给我的结果和 Safari 一样。
太棒了！有效。我只需要使用rgba(30, 113, 212, 0.5) 作为中间颜色就可以得到我想要的。谢谢！

【解决方案2】：

似乎不同的浏览器可能会以不同的方式混合background-color 和background-image 渐变。

您可以添加 background-blend-mode: screen; 或 background-blend-mode: overlay; 之类的内容，以尝试在两种浏览器中获得类似的行为

【讨论】：

我只是按照您的建议尝试了其他模式。我看到了不同的结果，但不是我想要的。