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

如果開始和結束顏色之間的差異太小而無法正確顯示其間的步驟，則會發生這種情況。