CSS体梯度

Question

我在body元素中创建了一个背景，但是当我创建背景时，它使用窗口height（仅可见高度），如果用户向下滚动页面{{1}重复它自己。如果我使用background，则页面的其余部分为纯色。

我使用过no-repeat但仍无效。

我只想要一个从#ccc到＃000的背景并填充整个页面而不重复.......

任何人都可以这么善良并帮助我吗？先谢谢！

编辑： 我的代码是：

background-size: 100% 100%;

最后编辑：

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 */ } 颜色，因为background不重复，而background-image以相同的background-image颜色结束，一切正常！

Answer 1

不幸的是，你不能伸展背景图像，所以你看到的实际上是你应该看到的。通常当网站使用渐变作为背景图像时，通过设置background-position: 0 0，渐变的顶部与屏幕顶部齐平，渐变通过设置background-repeat: no-repeat水平重复，然后它们将网站的background-color设置为与渐变底部相同的颜色。

使用CSS3和过滤器的方法可以为用户创建渐变，但这些功能的浏览器兼容性有限。这是一个包含渐变的小提琴：http://jsfiddle.net/Wexcode/qhMx9/。有关这些功能的详情，请参阅this article。