我试图创建一个从顶部的线性渐变像底部：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