13

次のように複数のストップを持つ線形グラデーションを使用している場合:

div
{
  border: 1px solid black;
  width: 100px;
  height: 2000px;
  display: inline-block;
  background-image: linear-gradient(to bottom, #383937 0, #001500 35px,
    #ffffff 35px, #b0b0b0 150px, #ffffff 150px, #ffffff 100%);
}

Firefox 問題なし。

クロム グラデーション カラー間の遷移がぼやけています。新しい色を定義するために位置を再利用しているため、位置 35 では、色が #001500 から #ffffff に即座に変化します (または、少なくともそうすべきです)。div が高いほど、グラデーション ストップ間のぼやけが大きくなります。

IE クロムのようなぼやけがありますが、極端ではありません。Chromeのように、divを高くするとぼやけが増します。

http://jsfiddle.net/cyq7grdr/5/

Firefox のグラデーション:

Firefox のグラデーション

クロムのグラデーション:

クロムのグラデーション

div の高さが低い場合のクロムのグラデーション (2000px ではなく 1000px):

ここに画像の説明を入力

編集

これは chrome では修正されているようですが、firefox で導入されました。誰かがこれを確認できるなら、私は幸せです.

4

3 に答える 3

9

問題の修正ではなく、単なる回避策です...複数のグラデーションを、問題を引き起こさないように十分小さいサイズの複数の背景として使用できます (< ~300px のようです)。background-sizeandと組み合わせると、background-position醜いが機能するものが得られます。

background-image:
    linear-gradient(to bottom, #383937 0, #001500 35px, #ffffff 35px, #b0b0b0 150px),
    linear-gradient(to bottom, #963 0, #abc 150px);
background-size:
    100px 150px,
    100px 150px;
background-position:
    0 0,
    0 150px;
background-repeat: no-repeat;

デモについては、 JSFiddleを参照してください。

于 2014-11-04T10:43:13.423 に答える