现代浏览器中的图案渐变

Question

现代浏览器中的图案渐变

13

最近我收到了越来越多关于糟糕的渐变效果（CSS、Canvas和SVG）的投诉。

由于这高度依赖于浏览器和操作系统，我无法提供全局的 MCVE。因此，我将重点介绍这个在 Chrome/Ubuntu 上糟糕渲染的简单 CSS 渐变（垂直条纹）：

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

当然，我对这个特定情况的解决方案很感兴趣。但是我更看重一般解决方案，可以获得平滑单调的渐变效果。基于Canvas或图像的解决方案不可接受，因为我的渐变数量众多、动态且通常部分透明。

- Denys Séguret

3

有兴趣在不同浏览器中比较它的表现，我在这里做了一个快速的演示：https://imgur.com/a/q8vl4 你可以看到在Win10 Chrome中它正常工作，但在Win10 FF和Win10 Edge中无法正常工作。这也发生在Ubuntu Chrome中。 - KarelG

可能是如何防止CSS渐变带状条纹？的重复问题。 - Sebastian

@Sebastian 这个古老的问答中实际上没有答案。 - Denys Séguret

2个回答

1

你看到的线条被称为色带。Win10中的Chrome 使用抖动渐变，而Firefox则不会。这因浏览器而异。 与此问题相关的一些信息链接：

据我所知，如果不使用图像作为渐变，就无法解决这个问题。也许未来版本的FireFox会对渐变进行抖动处理。

- Red

一些浏览器和操作系统可以解决某些渐变的问题。 - Denys Séguret

似乎只会在从深色到浅色的渐变中出现。如果使用其他渐变，比如紫色到粉色，色带几乎是看不见的。 - Red

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matthias Seifert · Accepted Answer

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

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

现在为了让它更清晰，让我们从这个简单的渐变开始。（别担心，我会解决图案问题）看起来很脏，对吧？特别是渐变中间的灰色。

如果我们看一下 RGB 颜色轮，我们会发现问题所在。渐变正好穿过轮盘的中心位置，这是一个非常淡薄的地方。我们可以避免这种情况，只需在渐变中添加另一个停止点，比如绿色。如果你将其与右侧的轮盘进行比较，你会发现这样可以避免中间的部分。下面的渐变更加丰富多彩，不会显得淡薄。

但是，现在我们的渐变中有一个相当难处理的模式。正如上面已经提到的那样，这是因为我们有许多不同的亮度。因此，我们实际上不想通过RGB光谱来进行渐变，而是更希望通过一个基于亮度的颜色空间进行渐变。那就是HSL颜色空间。下面你可以看到我们初始的红-青渐变在RGB和HSL之间的对比，你会注意到，在HSL渐变中几乎没有条纹。实际上，有一个网络工具，我喜欢用它来生成渐变。你可以给出起点和终点（以及中间的步骤），它会在所有不同的颜色空间中生成一个渐变，大多数时候我选择HSL，因为它是最自然的。

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