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打開網站，你會在白色和灰色之間得到一條清晰的切割線，而不會有任何漸變：

如果您使用chrome打開網站，則會獲得一個5px'ish灰色漸變，其中白色結束並且灰色開始：

如何使顏色突然停止而不在webkit瀏覽器上顯示實際的漸變，就像它目前在firefox上一樣？

干杯G.

Answer 1

嘗試在微軟的網站上使用這個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 2

從一些嘗試在測試用例中重現這一點，似乎問題可能是當沒有直接指定高度時，Webkit的實現無法計算html的確切高度。 將height設置為100％或固定像素高度似乎可以清除它。 但我懷疑這是一個實用的解決方案。 在我自己的使用中，我沒有注意到這是其他元素的問題，所以也許特別是在html上使用線性漸變。

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

Answer 3

這只是webkit和gecko之間的區別。 不幸的是，在如此大的梯度尺寸上，看起來webkit采用“快速”路線來渲染巨大的漸變（不要忘記漸變是瀏覽器生成的圖像 ）並且對它有些模糊。

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

見小提琴： http ： //jsfiddle.net/3ampp/

Answer 4

你試過這個嗎？

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

Answer 5

如果你想在webkit中實現從#fff到#eee的穩固過渡，我認為你必須將梯度放在一邊。 如果你像這樣設置你的CSS

html {
   background: #eee; 
   }

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

它將使用漸變復制您嘗試實現的內容。 （參見屏幕截圖）它也將與瀏覽器兼容。 我希望這有幫助。

Answer 6

這適用於所有瀏覽器：

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 7

正如egid所說，chrome確實采用快速路徑來渲染漸變。 看到這個問題和這支鋼筆進行了很酷的動畫演示。