Question

我对于渲染严重的渐变（CSS，Canvas，和 SVG）抱怨越来越多。

因为它高度依赖于浏览器和操作系统。我无法提出全球MCVE。因此，我将重点关注这个简单的CSS渐变，它在Chrome / Ubuntu（垂直条纹）上呈现得非常糟糕：

＆＃13;

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

＆＃13;

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

Answer 1

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

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

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

如果我们看一下RGB色轮，我们就会看到问题所在。渐变穿过车轮中间，这是一个非常褪色的地方。我们可以避免这种情况，如果我们开始在渐变中添加另一个停止点，例如绿色。如果将它与右侧的车轮进行比较，您可以看到，这可以避免中间的部件。下面的渐变更加丰富多彩，看起来并不褪色。

但是，现在我们的渐变中有一个相当坚硬的模式。如上所述，这是因为我们有很多不同的光度。所以我们实际上并不想通过渐变来浏览RGB光谱，我们更喜欢通过基于亮度的色彩空间。这就是HSL色彩空间。下面您将比较RGB和HSL之间的初始红色到青色渐变，您会注意到，HSL渐变中的条带少得多。有一个tool in the web，我喜欢用于渐变。你可以给出一个起点和终点（以及它们之间的步骤），它会在所有不同的颜色空间中生成一个渐变，而且我选择HSL一个，因为它是最自然的一个。

TL;博士这些模式的问题通常是渐变光度的问题，如果你试图改变颜色空间，它会更好地工作。现在我不说，不同的监视器，浏览器或操作系统对此没有任何影响，但问题可以通过这个技巧很容易地减少。

Answer 2

您看到的线条称为条带。 Chrome在Win10 dithers渐变中，FF则没有。这与每个浏览器不同。

与此问题相关的一些信息性链接：

不使用图像作为渐变，据我所知，不可能解决这个问题。也许FireFox会在将来的版本中使渐变变暗。

现代浏览器中的图案渐变

2 个答案: