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

これは、開始色と終了色の差が小さすぎて、その間のステップを適切に表示できない場合に発生する可能性があります。