我試圖創建一個從頂部的線性漸變像底部：CSS背景的線性漸變從上到下
不幸的是我得到的是：
以下是我的HTML：
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
Hi
</body>
</html>
我的CSS：
body{
background: linear-gradient(0deg, white, blue 80%) ;
}
如果我做90deg，而不是0deg然後我得到這樣的：
我需要這個梯度 - 但它應該由90度，即從頂部旋轉到底部而不是從左到右。我很好奇爲什麼0deg似乎給了類似於重複漸變的東西。
我已經使用了瀏覽器，Firefox 21和Chrome 27.我很感激任何建議。
嘗試設置在<html>背景，而 - 可能是更容易管理。然後給它一個height:100%;以及它肯定延伸整個頁面。
我也將它設置爲no-repeat所以你只有一個漸變，而不是從底部開始，當你有更長的內容。
html{
height:100%;
background: linear-gradient(0deg, white, blue 80%) no-repeat;
}
http://jsfiddle.net/daCrosby/nEQeZ/1/
編輯
fr13d在評論中指出，將在html梯度時，梯度將停在第一頁的任何滾動前的底部。也就是說，當您滾動時，漸變會被截斷（如果背景顏色與漸變的較低顏色不同，則會顯得很明顯）。解決此
一種方法是把造型上body代替：
body{
height:100%;
background: linear-gradient(0deg, yellow, blue 80%) no-repeat;
}
一種方法是給<body>和<html>元素一個明確的高度，因爲前者現在沒有，也沒有任何內容：
感謝** Adrift **。這似乎有點工作。如果你沒有使用'html'，即只是'body'，那麼它不起作用。爲什麼你需要同時指定'body'和'html'？ –
另外，如果您使用滾動條滾動到底部，則它具有深藍色線條。我們能避免嗎？ –
@ O.O：因爲「
」不知道100％身高是指*，因爲百分比值總是相對於另一個值，例如，其父母的身高。 – Adrift試試這個：
html {
height: 100%;
background: linear-gradient(0deg, white, blue 80%) ;
}
body {
height: 0%;
}
我同意從@DACrosby解決方案，但建議用「固定」來擴展背景。在這種情況下，您的背景將保持原樣，並且整個站點的漸變不僅僅位於頂部。
background: linear-gradient(0deg, red, blue 80%) fixed no-repeat;
什麼是你身體的計算身高？嘗試將CSS身體設置爲100％身高 – jtheman