CSS3線性漸變色停止工作不同WebKit的

Question

參考：www.get-offit.com

轉至書的封面幾乎目的和背景顏色變化：

我們：

html { 
background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -ms-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -o-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(5, #FFFFFF), to(#EEEEEE)); 
background: -webkit-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 

}

如果你用firefox打開網站，你會得到白色和灰色之間沒有任何漸變的清晰線條：

如果打開鍍鉻的網站，你會得到一個5px'ish灰色漸變其中白色結束，灰色開始：

如何讓這個顏色停止突然沒有顯示在webkit瀏覽器上的實際漸變，因爲它目前在Firefox上做？

乾杯 摹

Answer 1

從一些嘗試重現這個在測試情況下，出現的問題可能是WebKit的執行有困難計算html確切高度時，沒有直接規定高度。設置100％或固定像素高度的height似乎可以清除它。但我懷疑這是一個實際的解決方案。在我自己的使用中，我沒有注意到這是其他元素的問題，所以在html上使用線性漸變也許是特別的。

如果這是一個Webkit的錯誤，那麼你最好的解決方案可能是重做你的CSS，以便灰色背景可以應用到元素。很顯然，這是適應Webkit的一個重大變化，但它也會使背景與舊版本的IE兼容。

Answer 2

我認爲如果你想在webkit中實現從#fff到#eee的穩定轉換，你將不得不放棄漸變。如果你設置你的css是這樣的

html { 
    background: #eee; 
    } 

    body { 
     background: #fff; 
     height: 500px; 
     } 

它會複製你想要實現使用漸變。 （見屏幕截圖）它也將跨瀏覽器兼容。我希望這有幫助。

Answer 3

這僅僅是WebKit的&壁虎之間的差異。不幸的是，在如此大的漸變尺寸下，它看起來像webkit採用「快速」路線渲染巨大的漸變（不要忘記漸變是瀏覽器生成的圖像），並且對它有些模糊。

嘗試使用background-position-y: 500px;強制漸變從webkit頂部開始500px。

見琴：http://jsfiddle.net/3ampp/

Answer 4

嘗試使用微軟的網站上的這個CSS工具（沒錯，微軟）：

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

這將有助於產生跨瀏覽器的CSS代碼（不只是IE）和也可以用來稍微改變漸變效果。你可以添加更多的漸變點，甚至嘗試不同的顏色。

下面是從網上工具的代碼示例：

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); 

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); 

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); 

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EEEEEE)); 

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); 

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); 

Answer 5

這在所有瀏覽器的工作對我來說：

html { 
background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -ms-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -o-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
background: -webkit-linear-gradient(#FFFFFF 500px, #EEEEEE 0px); 
background: linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px); 
} 

雖然不需要你想達到的效果的漸變。

Answer 6

你試過嗎？

background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 520px); 

Answer 7

正如egid所述，chrome確實採用了渲染漸變的快速途徑。看到this SO question和this pen爲一個很酷的動畫演示。