CSS漸變很少內容：修復有問題的Chrome

Question

我問一個問題CSS Gradients with little content一段時間回來

我想出了一個可能的修復http://jsfiddle.net/aruUS/2/

html, body { min-height: 100% } 
body { 
    background: -moz-linear-gradient(top, blue, red 200px); 
    background: -webkit-gradient(linear, 0 0, 0 200px, from(blue), to(red)); 
} 

只有Firefox的部分作品，它出現的webkit只支持彩色停止百分比？無論如何，使這項工作？

Answer 1

只需從200px刪除px 。在Webkit的漸變語法中，像素值是無單位的。即

background: -webkit-gradient(linear, 0 0, 0 200, from(blue), to(red)); 

見的Surfin' Safari的博客的Introducing CSS Gradients：

點是一對空間分割的值。語法支持數字，百分比或關鍵字頂部，底部，左側和右側的點值。

編號不具有單元，相對於長度，這做，according to the CSS specification。

Answer 2

試試這個：

-webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.3, rgb(255,0,0)), 
    color-stop(0.47, rgb(255,0,0)), 
    color-stop(1, rgb(0,0,254)) 
); 

更多信息-webkit-gradient，請訪問：http://webkit.org/blog/175/introducing-css-gradients/

活生生的例子：http://jsfiddle.net/aruUS/3/

工具來幫助您更：http://gradients.glrzad.com/