CSS CSS背景从上到下线性渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17179881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Background Linear Gradient from Top to Bottom
提问by O.O.
I am attempting to create a linear gradient from top to the bottom like:
我试图创建一个从上到下的线性渐变，如：
Unfortunately what I get is:
不幸的是，我得到的是：
The following is my HTML:
以下是我的 HTML：
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
Hi
</body>
</html>
And my CSS:
还有我的 CSS：
body{
background: linear-gradient(0deg, white, blue 80%) ;
}
If I do 90deg, instead of 0degthen I get this:
如果我这样做90deg，而不是0deg然后我得到这个：
I need this gradient - but it should be rotated by 90deg i.e. from the top to the bottom instead of left to right. I'm curious why 0deg seems to give something similar to a repeated gradient.
我需要这个渐变 - 但它应该旋转 90 度，即从上到下而不是从左到右。我很好奇为什么 0deg 似乎给出了类似于重复梯度的东西。
I have used browsers, Firefox 21 and Chrome 27. I'd be grateful for any advice.
我使用过浏览器、Firefox 21 和 Chrome 27。如果您有任何建议，我将不胜感激。
回答by DACrosby
Try setting the background on the <html>instead - may be easier to manage. Then give it a height:100%;as well so it for sure extends the whole page.
尝试在 上设置背景<html>- 可能更容易管理。然后也给它一个height:100%;，这样它肯定会扩展整个页面。
I also set it to no-repeatso you only get one gradient instead of it starting over at the bottom when you have longer content.
我还将它设置为no-repeat这样，当您有更长的内容时，您只会获得一个渐变而不是从底部重新开始。
html{
height:100%;
background: linear-gradient(0deg, white, blue 80%) no-repeat;
}
http://jsfiddle.net/daCrosby/nEQeZ/1/
http://jsfiddle.net/daCrosby/nEQeZ/1/
Edit
编辑
fr13d pointed out in the comments, when putting the gradient on htmlthe gradient will stop on the bottom of the first page, prior to any scrolling. That is, the gradient gets cut off when you scroll (noticeable if the background color is different than the gradient's lower color).
fr13d 在评论中指出，当将渐变放在渐变上时html，会在任何滚动之前停止在第一页的底部。也就是说，滚动时渐变会被切断（如果背景颜色与渐变的较低颜色不同，则很明显）。
One way around this is to put the styling on bodyinstead:
解决此问题的一种方法是body改用样式：
body{
height:100%;
background: linear-gradient(0deg, yellow, blue 80%) no-repeat;
}
回答by WebWorker
I agree with the solution from @DACrosby, but recommend to extend the background with 'fixed'. In that case your background will stay in place and you will have the gradient for the whole site not just on the top.
我同意@DACrosby 的解决方案，但建议使用“固定”扩展背景。在这种情况下，您的背景将保持原样，并且整个站点的渐变不仅在顶部。
background: linear-gradient(0deg, red, blue 80%) fixed no-repeat;
回答by adrift
One way is to give the <body>and <html>elements an explicit height as the former has none, nor any content:
一种方法是给<body>和<html>元素一个明确的高度，因为前者没有，也没有任何内容：
回答by teteArg
try this:
尝试这个：
html {
height: 100%;
background: linear-gradient(0deg, white, blue 80%) ;
}
body {
height: 0%;
}
