如何防止CSS渐变带? [英] How can I prevent CSS gradient banding?

问题描述

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

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 PNG image of noise, which helps a little. Is there any other way to fix this banding issue?

推荐答案

我知道您不喜欢这种声音，但它是目前唯一一种获得一致的跨浏览器的 real 方法在这种情况下，美学是使用重复的图像.

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

如果它是一个简单的线性渐变，则只需要其宽度为1px且与渐变一样高，然后将页面的背景色设为渐变的最终颜色即可平稳地运行.这样可以使文件很小.

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.

如果要减少图像中的渐变带，请使用PNG(而不是透明度)，因为我发现这些比JPG更适合.

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.

在Adobe Fireworks中，我将其导出为PNG-24.

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

祝你好运.

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

这篇关于如何防止CSS渐变带?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！