为什么这个渐变在 Chrome 上没有正确渲染？

Question

我使用 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

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

P.S.: 我是运行 Chrome 88.0.4324.96 和 Safari 14.0 (15610.1.28.1.9, 15610) 在 MacOS 10.15.7.

Answer 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);

Answer 2

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

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

为什么这个渐变在 Chrome 上没有正确渲染？

Why this gradient is not properly rendering on Chrome?

css

google-chrome

linear-gradients