html - CSS渐变带问题？

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

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