Html 全屏背景色css3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14938742/
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
full screen background colour css3
提问by Lawrence Smith
I have a gradient as a background colour but it's just repeating. I want the gradient to stretch to full screen so it's not possible to zoom out and see any white space or repeated gradients.
我有一个渐变作为背景颜色，但它只是重复。我希望渐变拉伸到全屏，因此无法缩小并看到任何空白或重复渐变。
Here is my css for the body
这是我的身体 css
body {
text-align:center;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(89,89,89,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(89,89,89,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(89,89,89,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(89,89,89,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(89,89,89,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(89,89,89,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#595959',GradientType=0 ); /* IE6-9 */
}
回答by
Try to set the height and width on bodyand also try to use background-attachment:
尝试设置高度和宽度，body并尝试使用background-attachment：
html, body
{
width: 100%;
height: 100%;
}
body
{
…
width: 100%;
height: 100%;
background-attachment: fixed;
}
回答by Dvir Levy
I pasted your code in a test page and it seems to be doing exactly what you want. if you are having trouble with it, maybe you can try adding background-size: 100%;
我将您的代码粘贴到测试页中，它似乎完全符合您的要求。如果您遇到问题，也许您可以尝试添加background-size: 100%;
Hope it helps.
希望能帮助到你。
