web-dev-qa-db-ja.com

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

私は2つの理由で、実際の画像ではなくCSSグラデーションを使用し始めました。1つ目は、CSSグラデーションが画像よりも確実に速く読み込まれることです。最近、さまざまな画面でサイトのテストを開始しました。大きな画面（24インチ以上）では、サイトの背景を構成するCSS線形グラデーションに非常に目に見えるバンディングが示されています。暫定的な修正として、グラデーションを小さく繰り返して透明なPNGノイズイメージでオーバーレイしました。これは少し役立ちます。このバンディングの問題を修正する他の方法はありますか？

css3gradientlinear-gradientscss
35
John Doe

あなたはこの音が気に入らないことを知っていますが、この場合に一貫したクロスブラウザの美学を得るための唯一の本当の方法は繰り返し画像を使用します。

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

画像のグラデーションバンドを減らしたい場合は、PNGを使用します（透明度ではなく）。この目的にはJPGよりも適していると思います。

Adobe 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);
}
18
Michael Giovanni Pumo

グラデーションを最初の色から透明にすると、background-color下の2番目の色。また、background-size画面全体に広がる大きなグラデーションの場合、グラデーションが実際に画面全体に表示されません。

17
AlexKempton

グラデーションを入れる「scatter.png」を作成しました。このような：

  1. オープンギンプ
  2. 100x100画像
  3. アルファチャンネルを追加
  4. フィルター->ノイズ->ハール...デフォルトを受け入れる
  5. 不透明度を5％に設定します

  6. 保存してからグラデーションに追加します。

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

微妙な効果に対する微妙な効果です。

4
Michael Cole

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

このグラデーションはバンディングを生成します：

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%);
2
Allan of Sydney

バンディングを除去する方法は実際にはありません。 CSSのグラデーションは、ブラウザーのさまざまなレンダリングエンジンに左右されます。一部のブラウザは、他のブラウザよりもレンダリングが単純です。あなたができる最善の方法は、カバーする短い領域とグラデーションのステップを増やすための広い色範囲です。

1
Scott

純粋なCSS回答では、ぼかしフィルターを使用して、CSSグラデーションにぼかしを追加し、バンディングを軽減できます。これは、コンテンツをぼやけさせないように階層を再構築することを意味する可能性があり、鮮明なエッジを得るためにオーバーフローを非表示にする必要があります。バンディングの問題が特にひどい場合のあるアニメーションの背景で非常に効果的です。

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