如何防止 CSS 渐变条带？

How can I prevent CSS gradient banding?

提问by John Doe

I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNGimage of noise, which helps a little. Is there any other way to fix this banding issue?

我开始使用 CSS 渐变，而不是实际图像，有两个原因：首先，CSS 渐变的加载速度肯定比图像快，其次，它们不应该像许多光栅图形一样显示条带。我最近开始在各种屏幕上测试我的网站，在较大的屏幕上（24 英寸以上），构成我网站背景的 CSS 线性渐变显示出非常明显的条纹。作为临时修复，我用一个小的、重复的、透明PNG的噪声图像覆盖了渐变，这有点帮助。有没有其他方法可以解决此条带问题？

采纳答案by Michael Giovanni Pumo

I know you won't like the sound of this, but the only realway right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.

我知道你不会喜欢这样的声音，但现在在这种情况下获得一致的跨浏览器美学的唯一真正方法是使用重复图像。

If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.

如果是简单的线性渐变，那么你只需要1px宽和渐变一样高，然后将页面的背景色作为渐变的最终颜色，这样它就可以流畅地运行。这将保持文件大小很小。

If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.

如果您想减少图像中的渐变带，请使用 PNG（不是透明度），因为我发现它们比 JPG 更适合用于此目的。

In Adobe Fireworks, I would export this as a PNG-24.

在 Adob​​e Fireworks 中，我会将其导出为 PNG-24。

Good luck.

祝你好运。

http://codepen.io/anon/pen/JdEjWm

http://codepen.io/anon/pen/JdEjWm

#gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
  background: -webkit-linear-gradient(top, black, white);
  background: -moz-linear-gradient(top, black, white);
  background: -ms-linear-gradient(top, black, white);
  background: -o-linear-gradient(top, black, white);
  background: linear-gradient(top, black, white);
}

回答by AlexKempton

You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-colorunderneath for your second colour. I'd also recommend playing around with background-sizefor large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.

通过使渐变从第一种颜色变为透明，并在background-color下方设置第二种颜色，您可以获得稍微好一点的结果。我还建议您使用background-size在屏幕上延伸的大渐变，这样渐变实际上不会填满整个屏幕。

回答by Michael Cole

I made a "scatter.png" to put with my gradient. Like this:

我制作了一个“scatter.png”来放置我的渐变。像这样：

1. Open gimp
2. 100x100 image
3. Add alpha channel
4. Filters -> Noise -> Hurl... Accept defaults
5. Set opactity to 5%

6. Save and then add to gradient.

   background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
   

1. 打开 gimp
2. 100x100 图像
3. 添加阿尔法通道
4. 过滤器 -> 噪音 -> 投掷...接受默认值
5. 将不透明度设置为 5%

6. 保存，然后添加到渐变。

   background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
   

It's a subtle effect on a subtle effect.

这是微妙效果上的微妙效果。

回答by Allan of Sydney

I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:

我知道这个问题早就解决了，但对于其他遇到条带和寻找解决方案的人来说，对我来说一个非常简单的解决方法就是简化我在渐变中包含的颜色。例如：

This gradient produces banding:

此渐变会产生条带：

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);

This gradient does not, and looks much the same:

这个渐变没有，看起来很相似：

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);

回答by Scott

There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.

真的没有任何方法可以去除条带。CSS 渐变受浏览器的各种渲染引擎的支配。一些浏览器只是比其他浏览器呈现得更好。您可以做的最好的事情是覆盖较短的区域和较大的颜色范围以增加渐变步骤......然后等待浏览器渲染改进。

回答by Sven

For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.

对于纯 CSS 答案，您可以使用模糊过滤器为 css 渐变添加模糊并减轻条带。这可能意味着对层次结构进行一些重建以不模糊内容，您需要隐藏溢出以获得清晰的边缘。在条带问题可能特别严重的动画背景上效果非常好。

.blur{
  overflow:hidden;
  filter: blur(8px);
}