Question

以下是我的网站：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);  

}

Answer 1

background-attachment:fixed执行您想要的操作，但接下来您要设置background:并覆盖该值。将其替换为background-image，您就完成了。

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;

Answer 3

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

background-attachment:fixed实际上修复了背景，因此它从不滚动，这解决了问题，但添加了视觉神器。

Answer 4

您需要按顺序执行

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

那应该有用

CSS3渐变不能正确滚动

4 个答案: