CSS3渐变不正常滚动

Question

这是我的网站链接：链接

我搜索了一下，但没有找到我需要的内容。我试图使用CSS渐变来设置我的网站背景，但它不能正确地调整大小。相反，当你滚动时，它会重复出现。即使将background-repeat设置为no repeat，我仍然遇到这个问题。有人知道我的问题在哪里吗？以下是我的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);  

}

- user1058367

---

不要忘记接受最帮助你的答案！（点击“V”标志）……这是我们这里说“谢谢”的方式。 - Roko C. Buljan

原来页面底部的 Twitter 动态消息加载在 CSS 代码之后（因此延长了页面），导致 CSS 代码难以维护渐变效果。不过仍然没有解决办法。 - user1058367

Answer 1

background-attachment:fixed 可以实现你想要的效果，但是接下来你设置了 background: 并覆盖了该值。将其替换为 background-image 即可完成。

- DiogoDoreto

---

抱歉出现了这个小错误，但它并没有解决我的问题。每次我滚动屏幕时，渐变仍然在重复。进展依然很少 =/ - user1058367

Answer 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;

- Ivan Prishvin

Answer 3

只需将背景颜色设置为#ccc，问题就会消失。页面的其余部分将变为#ccc。这是渐变和background-size的局限性。理论上，background-size:cover应该可以正确解决此问题，但由于各种规范的相互作用，它似乎无法做到。实际上，background-attachment:fixed可以固定背景，使其永远不会滚动，从而解决了问题，但会添加视觉效果。

- Sajid

---

我尝试使用background-attachment:fixed，但似乎并没有帮助我的情况。 - user1058367

我建议不要使用那个。你试过另一个解决方案了吗？例如，background-color:#ccc;？ - Sajid

Answer 4

您需要按顺序执行以下步骤。

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

那应该可以工作

- SteveHippy