CSS3渐变无法正确滚动答案

【问题标题】：CSS3 gradient not scrolling properlyCSS3渐变无法正确滚动
【发布时间】：2011-11-21 18:36:48
【问题描述】：

这是我的网站：Link

我环顾四周，但找不到我要找的东西。我正在尝试为我的网站背景使用 CSS 渐变，但它没有正确调整大小。相反，当您必须滚动时，它会重复。即使将背景重复设置为不重复，我仍然遇到这个问题。有谁知道我的问题是什么？这是我的 CSS。

html{
height:100%;
}
body {font: 14px/normal Tahoma, Arial, Helvetica, sans-serif; 
height: 100%;
min-height:100%;
margin:0;
background-repeat:no-repeat;
background-attachment:fixed;

background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#ccc)); 

  background-image: -moz-linear-gradient(top, #000, #ccc);

  background-image: -o-linear-gradient(top, #000, #ccc);

  background-image: linear-gradient(top, #000, #ccc);  

}

【问题讨论】：

别忘了采纳对你最有帮助的答案！（点击“V”标记）......这就是我们在这里说“谢谢”的方式。
在 CSS 代码之后加载页面底部的 twitter 提要（因此延长了页面），并且 CSS 代码在之后无法维持渐变。仍然不知道如何解决。

标签： css gradient

【解决方案1】：

background-attachment:fixed 做你想做的事，但接下来你要设置 background: 并覆盖该值。将其替换为 background-image 即可完成。

【讨论】：

抱歉这个小错误，但这并不能解决我的问题。每次我需要滚动时，它仍在重复我的渐变。仍然没有进展=/

【解决方案2】：

background:url(/_pix/bg.png) repeat,-webkit-gradient(linear,left top,left bottom,color-stop(0,#C8AA86),color-stop(1,#664927));
background:url(/_pix/bg.png) repeat,-webkit-linear-gradient(top,#C8AA86 0%,#664927 100%);
background:url(/_pix/bg.png) repeat,-moz-linear-gradient(top,#C8AA86 0%,#664927 100%);
background:url(/_pix/bg.png) repeat,-ms-linear-gradient(top,#C8AA86 0%,#664927 100%);
background:url(/_pix/bg.png) repeat,-o-linear-gradient(top,#C8AA86 0%,#664927 100%);
background:url(/_pix/bg.png) repeat,linear-gradient(top,#C8AA86 0%,#664927 100%);
background-attachment:fixed;

【讨论】：

【解决方案3】：

只需将背景颜色设置为#ccc，问题就会消失。您页面的其余部分将只是#ccc。这是渐变的限制 + background-size。理论上，background-size:cover 应该可以正确解决这个问题，但由于各种规范的相互作用，它似乎没有这样做。

background-attachment:fixed 实际上修复了背景，使其从不滚动，这解决了问题，但增加了视觉伪影。

【讨论】：

我试过 background-attachment:fixed 但它似乎对我的情况没有帮助。
我建议不要使用它。您是否尝试过其他解决方案？例如，background-color:#ccc;?

【解决方案4】：

你需要按顺序做

    background-repeat:no-repeat;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#ccc)); 
    background-attachment:fixed;

应该可以的

【讨论】：