2017-05-12 11 views
0

Chromeを使用したCSSバックグラウンド勾配バグ?

html { 
 
    background:#ffffff; 
 
} 
 
body { 
 
    height:250px; 
 
    background: linear-gradient(
 
    to bottom, 
 
    #ffffff 0px, 
 
    #ffffff 100px, 
 
    #0065A2 100px, 
 
    #0065A2 145px, 
 
    #074A8B 145px, 
 
    #074A8B 163px, 
 
    #0065A2 163px, 
 
    #0065A2 203px, 
 
    transparent 203px 
 
); 
 
}

私は、バックグラウンドの直線勾配を使用しようとしていますし、大きな驚きと、それはFirefoxとIE上ではなく、GoogleのChromeで良い作品。

コードは、例えばここにある:https://jsfiddle.net/be1rgpez/1/

background: linear-gradient(
    to bottom, 
    #ffffff 0px, 
    #ffffff 100px, 
    #0065A2 100px, 
    #0065A2 145px, 
    #074A8B 145px, 
    #074A8B 163px, 
    #0065A2 163px, 
    #0065A2 203px, 
    transparent 203px 
); 

私は(画像左のボックスを参照)、それは色の間に奇妙な影をレンダリングするいくつかのカラーストップを持つ線形グラデーションを必要とするが、Google Chromeを使用して。私が必要とする効果は、影なしに「縞模様」です。

添付ファイルにChromeを使用して表示されているものを示します。 左のボックスは、私が必要とするものですが、影なしに(右のボックスのように)です。同じjsfiddleがFirefoxとIEで正しく表示されます。

enter image description here

UPDATE:これはズーム絵です。ご覧のように、左のボックスには、白と青の色の間(そして他の色の間)に小さな影があります。

enter image description here

+1

私は勾配について多くを知らないが、しかし、あなたはPXのの代わりに%を使用している場合、それは動作します。 – SjaakvBrabant

+0

左のボックスに添付された画像の@Peteは、色の間に小さな影を示します。私は色の間の影(白と青)なしで、右のボックスに効果が必要です。しかし、私はより多くの色(白、青、濃紺...)でそれが必要です。 2つ以上の色(または2つのストライプ)を使用すると、Google Chromeがその小さな影をレンダリングするように見えます。 – webpaul

答えて

0

あなたは色違いのために、同じ出発点を2回定義されています。

.left { 
    background: linear-gradient(
     to bottom, 
     #ffffff 0px, 
     #0065A2 100px, 
     #074A8B 145px, 
     #0065A2 163px, 
     transparent 203px 
    ); 
} 
+0

このコードはグラデーションを生成します。私は網の色の変化と縞が必要です。勾配は必要ありません。これが私が同じピクセル "ストップ"を使用している理由です:スムーズ/グラデーション効果なしで色をシャープにすることができます。 – webpaul

+1

https://graphicdesign.stackexchange.com/questions/8426/gradient-banding-in-chrome – Gerard

1

このコードしてみてください:重複せずに以下のコードは正常に見える

.left { 
    background: linear-gradient(to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px); 
    background: -webkit-linear-gradient(to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px); 
} 

.right { 
    background: linear-gradient(to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px); 
    background: -webkit-linear-gradient(to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px); 
} 
+0

このコードは1色の変化(#ffffffから#0065A2まで)しかありません。このコードはchromeで動作します。しかし、私はさらに色の変更が必要です:#ffffff、#0065A2、#074A8B、そして再び#0065A2そして最後は透明です。いくつかの色は、(私が質問に書いたように)クロムにバグのある行動を取っているようです。 – webpaul

関連する問題