CSS 主体渐变
我正在 body 元素中制作背景，但是当我制作背景时，它使用窗口 height （仅可见高度），并且如果用户将页面向下滚动 < code>background 重复它自己。如果我使用no-repeat，则页面的其余部分为纯色。
我已经使用了 background-size: 100% 100%; 但仍然无法正常工作。
我只想要一个从 #ccc 到 #000 的背景，并填充整个页面而不重复......
任何人都可以这么好心帮助我吗？提前致谢！
编辑： 我的代码是：
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#000000',GradientType=0 );
}
最后编辑：
body {
background: #000;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
}
注意：我找到的最佳解决方案。当我滚动窗口时，您可以看到背景颜色，因为背景图像不会重复，并且背景图像以相同的结尾背景颜色一切正常！
I am making a background in the body element but when I make a background it uses the window height (only the visible height) and if the user scrolls the page down the background repeats it self. If I use no-repeat the rest of the page is in solid color.
I have used background-size: 100% 100%; but still not working.
I only want a background that goes from #ccc to #000 and fills the entire page without repeating itself.....
Can anyone be so kind and help me? Thanks in advanced!
EDIT:
My code is:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#000000',GradientType=0 );
}
LAST EDIT:
body {
background: #000;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
}
note: The best solution I found. When I scroll the window you can see the background color because the background-image does not repeat and as the background-image ends with the same background color everything is ok!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不幸的是，您无法拉伸背景图像，因此您所看到的实际上就是您应该看到的。通常，当网站使用渐变作为背景图像时，他们通过设置
background-position: 0 0使渐变的顶部与屏幕顶部齐平，通过设置 < 使渐变水平重复自身code>background-repeat: no-repeat，然后他们将网站的background-color设置为与渐变底部相同的颜色。您可以通过多种方式使用 CSS3 和滤镜为用户创建渐变，但这些功能的浏览器兼容性有限。这是一个包含渐变的小提琴：http://jsfiddle.net/Wexcode/qhMx9/。有关这些功能的更多信息，请参阅本文。
Unfortunately, you cannot stretch out background images, so what you are seeing is actually what you're supposed to see. Normally when sites use gradients as background images, they make it so the top of the gradient is flush with the top of the screen by setting
background-position: 0 0, the gradient repeats itself horizontally by settingbackground-repeat: no-repeat, and then they set thebackground-colorof the site to be the same color as the bottom of the gradient.There are ways using CSS3 and filters in which you can create gradients for users, but there is a limited amount of browser-compatibility for these features. Here is a fiddle containing a gradient: http://jsfiddle.net/Wexcode/qhMx9/. See this article for more information about those features.