CSSグラデーションバンディングを防止するにはどうすればよいですか？

Question

私はCSSグラディエントを実際のイメージよりもむしろ使い始めました。最初に、CSSグラジエントはイメージよりも確実に高速に読み込まれ、第2に、非常に多くのラスターグラフィックのようにバンディングが表示されません。私は最近、さまざまな画面で自分のサイトをテストし始めました。大きなもの（24インチ以上）では、私のサイトのバックグラウンドを構成するCSSリニアグラデーションが非常に目立ちやすいバンディングを示しています。暫定的な修正として、グラデーションに小さなノイズが反復的に重なって表示されました。このバンディングの問題を解決する他の方法はありますか？

Answer 1

私はあなたがこれの音が好きではないことを知っていますが、実際ちょうどこの場合、一貫したクロスブラウザの美学を得る方法は、繰り返しイメージを使用することです。

単純な線形グラデーションの場合は、幅が1ピクセル、グラデーションの高さになるようにするだけで、ページの背景色をグラデーションの最終色にしてスムーズに実行できます。これにより、ファイルサイズが小さく保たれます。

イメージのグラデーションバンドを縮小したい場合は、この目的のためにJPGよりも適していると思うので、PNG（透明ではない）を使用してください。

Adob​​e Fireworksでは、これをPNG-24としてエクスポートします。

幸運。

http://codepen.io/anon/pen/JdEjWm

#gradient { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white)); 
    background: -webkit-linear-gradient(top, black, white); 
    background: -moz-linear-gradient(top, black, white); 
    background: -ms-linear-gradient(top, black, white); 
    background: -o-linear-gradient(top, black, white); 
    background: linear-gradient(top, black, white); 
} 

Answer 2

バンディングを削除する方法はありません。 CSSのグラデーションは、ブラウザのさまざまなレンダリングエンジンの恩恵を受けています。一部のブラウザは他のブラウザよりも優れたレンダリングをしています。あなたができる最善の方法は、カバーする短い領域と、グラデーションのステップを増やすために大きな色の範囲です....そして、ブラウザのレンダリングが改善するのを待ちます。

Answer 3

あなたの勾配があなたの第二の色のためのbackground-colorの下で、透明に最初の色から行くことによって、わずかに良い結果をもたらすことができます。また、画面全体に広がる大きな勾配の場合はbackground-sizeで再生することをお勧めします。そのため、勾配は実際には画面全体を満たしません。

Answer 4

「scatter.png」を作成して自分のグラデーションに貼り付けました。このように：

1. オープンGIMP
2. 100x100の画像
4. フィルタアルファチャンネルを追加 - >ノイズ - >投げる... 5％

5. 保存にデフォルト

6. セットopactityを受け入れますグラデーションに追加します。

   background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%); 
   

それは微妙な効果に微妙な影響です。

Answer 5

純粋なCSS回答の場合、ぼかしフィルタを使用してCSS勾配にぼかしを追加し、縞模様を軽減することができます。コンテンツをぼかさないように階層を再構築することを意味し、鮮明なエッジを得るためにオーバーフローを隠す必要があります。バンディングの問題が特に深刻なアニメーション化された背景で本当にうまくいきます。

.blur{ 
    overflow:hidden; 
    filter: blur(8px); 
} 

Answer 6

私は、この問題が解決され、長い知っているが、他の人がバンディングを経験し、解決策を探しのために、私にとって非常に簡単な修正はちょうど私が私のグラデーションに含まれた色を簡素化しました。たとえば：

この勾配は、バンディングを生成します。

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%, 
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%); 

この勾配はない、とほとんど同じになります：

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);