47

実際の画像ではなく CSS グラデーションを使い始めた理由は 2 つあります。まず、CSS グラデーションは画像よりも確実に高速に読み込まれます。次に、多くのラスター グラフィックスのようにバンディングを表示することは想定されていません。最近、さまざまな画面でサイトのテストを開始しましたが、より大きな画面 (24 インチ以上) で、サイトの背景を構成する CSS 線形グラデーションに非常に目立つバンディングが見られます。PNG暫定的な修正として、グラデーションに小さな繰り返しの透明なノイズの画像を重ねました。これは少し役に立ちます。このバンディングの問題を解決する他の方法はありますか?

4

8 に答える 8

21

この音が気に入らないことはわかっていますが、この場合、一貫したクロスブラウザーの美学を得る唯一の現実的な方法は、繰り返し画像を使用することです.

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

画像のグラデーション バンドを減らしたい場合は、この目的には JPG よりも PNG の方が適していることがわかっているため、PNG (透明度ではない) を使用してください。

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);
}
于 2012-07-26T10:17:57.513 に答える
20

background-colorグラデーションを最初の色から透明にし、その下に 2 番目の色を配置すると、わずかに良い結果が得られます。background-sizeまた、画面全体に広がる大きなグラデーションを試してみることをお勧めします。これにより、グラデーションが実際には画面全体を埋め尽くすことはありません。

于 2013-03-05T17:08:58.167 に答える
4

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

  1. gimpを開く
  2. 100x100 の画像
  3. アルファチャンネルを追加
  4. Filters -> Noise -> Hurl... デフォルトを受け入れる
  5. 不透明度を 5% に設定

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

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

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

于 2016-09-23T13:30:42.790 に答える
4

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

.blur{
  overflow:hidden;
  filter: blur(8px);
}
于 2017-09-01T14:33:11.057 に答える
2

この問題は長い間解決されていますが、バンディングが発生して解決策を探している他の人にとっては、グラデーションに含まれる色を単純化するだけで簡単に解決できました. 例えば：

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

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%);
于 2018-01-15T04:18:24.333 に答える
1

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

于 2012-07-26T09:35:56.830 に答える