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

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

Answer 2

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

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

另见：http://bjango.com/articles/gradients/