现代浏览器中的图案渐变

Question

关于渲染严重的渐变(CSS,Canvas 和 SVG),我得到越来越多的抱怨.

因为它高度依赖于浏览器和操作系统.我无法提出全球MCVE.所以我将专注于这个简单的CSS渐变,它在Chrome/Ubuntu(垂直条纹)上呈现得很糟糕:

body {
    background: linear-gradient(90deg, #111, #444);
}

当然,我对这个具体案例的解决方案感兴趣.但我更重视一般解决方案,以获得平滑单调的渐变.基于画布或图像的解决方案是不可接受的,因为我的渐变是大量的,动态的,并且通常是部分透明的.

Answer 1

在许多情况下，这不一定是操作系统或浏览器的错误，更多的是问题，很多人不知道渐变是如何工作的，以及为什么它们是图案化的。

这是每种颜色的亮度问题。在您的示例中，很容易找到渐变的亮度，因为它是灰度渐变。看一下下面的图片，我将渐变的最暗和最亮的颜色并排放置。您会注意到，它们的亮度略有不同。如果你把黑色调浅一点（或者灰色调深一点），图案就会开始消失。

现在为了让它更清楚，让我们从这个简单的渐变开始。（别担心，我会解决模式问题）看起来很脏，不是吗？尤其是渐变中间的灰色。

如果我们看一下 RGB 色轮，我们就会发现问题。渐变直接穿过轮子的中间，这是一个真正被冲掉的地方。如果我们开始在渐变中添加另一个停止点（例如绿色），我们就可以避免这种情况。如果你将它与右侧的轮子进行比较，你可以看到，这避开了中间的部分。下面的渐变颜色更加鲜艳，而且看起来不会褪色。

但是，现在我们的渐变中有一个相当困难的模式。正如上面已经提到的，这是因为我们有很多不同的光度。因此，我们实际上不想使用渐变来遍历 RGB 光谱，我们更想遍历基于亮度的颜色空间。这就是 HSL 色彩空间。下面对 RGB 和 HSL 之间的初始红到青色渐变进行了比较，您会注意到，HSL 渐变中的条带要少得多。网络上实际上有一个工具，我喜欢用它来进行渐变。你可以给出一个起点和一个终点（以及之间的步骤），它会在所有不同的颜色空间中生成一个渐变，我主要选择 HSL 一个，因为它是最自然的一个。

tl;dr 这些图案的问题通常是渐变亮度的问题，如果您尝试更改颜色空间，效果会更好。现在我并不是说，不同的显示器、浏览器或操作系统对此没有任何影响，但通过这个技巧可以很容易地减少问题。