CSS Gradient Banding问题？

Question

我一直试图在CSS中制作一个很酷的渐变，但我遇到了一个不可接受的问题。 CSS渐变是条带，看起来不太好。我也不想使用任何图像。这是我的代码：

background-image: -moz-linear-gradient(top, #333, #000);
background-image: -ms-linear-gradient(top, #333, #000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#000));
background-image: -webkit-linear-gradient(top, #333, #000);
background-image: -o-linear-gradient(top, #333, #000);
background-image: linear-gradient(top, #333, #000);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333', endColorstr='#000', GradientType=0);

我该怎么做才能解决这个问题？

Answer 1

对于它的价值，我看不到你在我的显示器上描述的条带问题，但我相信我知道你得到了什么。

通常，浏览器在创建渐变时不使用抖动。这意味着颜色之间的步骤可以更明显。解决这个问题的唯一方法是在软件中制作渐变（例如Photoshop），然后将背景颜色设置为图像。对于如此高质量的图像，尺寸将非常大，可能不值得。此外，大小变得固定，而不像CSS那样动态。

另请参阅：http://bjango.com/articles/gradients/

Answer 2

如果开始和结束颜色之间的差异太小而无法正确显示中间的步骤，则会发生这种情况。