Chrome中的漸變條紋

我使用了Colorzilla CSS漸變生成器來創建具有多個顏色中止的背景。它在Firefox和Safari中效果很好，但在Chrome中有一個微妙的條紋/條帶化的事情，令人沮喪。這裏是我的代碼和的jsfiddle鏈接：Chrome中的漸變條紋

body { 
background: rgb(0,0,0); /* Old browsers */ 
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(85,187,0,1) 15%, rgba(85,187,0,1) 25%, rgba(221,34,85,1) 45%, rgba(221,34,85,1) 55%, rgba(0,136,238,1) 75%, rgba(0,136,238,1) 85%, rgba(0,0,0,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(15%,rgba(85,187,0,1)), color-stop(25%,rgba(85,187,0,1)), color-stop(45%,rgba(221,34,85,1)), color-stop(55%,rgba(221,34,85,1)), color-stop(75%,rgba(0,136,238,1)), color-stop(85%,rgba(0,136,238,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(85,187,0,1) 15%,rgba(85,187,0,1) 25%,rgba(221,34,85,1) 45%,rgba(221,34,85,1) 55%,rgba(0,136,238,1) 75%,rgba(0,136,238,1) 85%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(85,187,0,1) 15%,rgba(85,187,0,1) 25%,rgba(221,34,85,1) 45%,rgba(221,34,85,1) 55%,rgba(0,136,238,1) 75%,rgba(0,136,238,1) 85%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(85,187,0,1) 15%,rgba(85,187,0,1) 25%,rgba(221,34,85,1) 45%,rgba(221,34,85,1) 55%,rgba(0,136,238,1) 75%,rgba(0,136,238,1) 85%,rgba(0,0,0,1) 100%); /* IE10+ */ 
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(85,187,0,1) 15%,rgba(85,187,0,1) 25%,rgba(221,34,85,1) 45%,rgba(221,34,85,1) 55%,rgba(0,136,238,1) 75%,rgba(0,136,238,1) 85%,rgba(0,0,0,1) 100%); /* W3C */ 
width:100%; 
margin-bottom:1em; 
}

http://jsfiddle.net/yL82a/ （忽略邊距聲明）

不知道如何解決這個問題在Chrome僅僅是一個很好的平滑漸變？我已經嘗試使用rgba和十六進制值，並得到相同的結果。

來源

2013-02-14 Michael Histen

我沒有看到Firefox和Chrome之間有什麼區別，現在我看到，暈倒的不透明條 – 2013-02-14 17:23:17

對我而言，Chrome和Firefox看起來都一樣，都有相當明顯的樂隊。下面是我的最後一張Firefox的截圖：http://i.imgur.com/1KwImIF.png – InsomniaBass 2013-02-14 17:25:05

謝謝@moettinger--看起來這就是我的答案。如果你願意，你可以留下你的回答作爲答案，我會將其標記爲已接受。 – 2013-02-14 18:55:57

有與Chrome如何處理抖動有關。問題是這裏討論：

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

來源

2013-02-14 18:56:00 moettinger

-1

嘗試生成從本網站的CSS梯度，看看你是否能找到任何區別，它會幫助你調試代碼，

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

祝您好運..

來源

2013-02-14 17:49:38

謝謝，但它看起來可能是Chrome處理漸變的方式，因爲該工具會產生相同的結果。 – 2013-02-14 18:35:14

我想整個頁面有一個漸變背景，而這個問題是很煩人的。最後，我可以通過將-webkit-filter: blur(3px);應用於<body>來刪除條紋，但隨後整個內容模糊不清，因此我單獨製作了<div>作爲該頁面的背景，並將過濾器應用於該過濾器。

CSS：

html, body { 
    width: 100%; 
    margin: 0; 
} 

#page-background 
{ 
    width: 100%; 
    height: 100%; 
    background: #383838; /* Old browsers */ 
    background: -webkit-linear-gradient(top, #383838 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */ 
    (...) 
    -webkit-filter: blur(3px); 
}

HTML：

<body> 
    <div id="page-background"></div> 
    And content goes here...

梯度在ColorZilla site產生。

來源

2014-01-18 18:34:37 ha7ilm

Chrome中的漸變條紋

回答

相關問題