Question

我有一个CSS渐变作为完整背景，但当我在下拉菜单中使用jQuery时，背景显示重复。

这些是身体属性：

html {
    height: 100%;
}
body {
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: #639964; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #639964 25%, #402180 94%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(25%,#639964), color-stop(94%,#402180)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #639964 25%,#402180 94%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #639964 25%,#402180 94%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #639964 25%,#402180 94%); /* IE10+ */
    background: linear-gradient(135deg,  #639964 25%,#402180 94%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#639964', endColorstr='#402180',GradientType=1); /* IE6-9 fallback on horizontal gradient */
    color: #fff;
    font-family: 'Special Elite', cursive;
    margin: 0;
}

我已将完整代码放入Codepen。

拜托，有人能告诉我我做错了吗？

谢谢！

Answer 1

在所有背景属性之后添加以下结尾，它应该可以正常工作。

background-attachment: fixed;

body {
height: 100%;
background-repeat: no-repeat;

background: #639964; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #639964 25%, #402180 94%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(25%,#639964), color-stop(94%,#402180)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #639964 25%,#402180 94%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #639964 25%,#402180 94%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #639964 25%,#402180 94%); /* IE10+ */
background: linear-gradient(135deg,  #639964 25%,#402180 94%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#639964', endColorstr='#402180',GradientType=1); /* IE6-9 fallback on horizontal gradient */
color: #fff;
font-family: 'Special Elite', cursive;
margin: 0;
background-attachment: fixed;
}

Answer 2

你需要制作一个100％宽度和100％高度的新固定位置div。在此处应用渐变背景，而不是在您的身体标记中。

将此div放在身体标签的第一个位置。

希望这对你有所帮助。

Answer 3

添加身体部位

CSS

background: -webkit-gradient(linear, left top, left bottom, from(#639964), to(#402180)) fixed;

第二种方式

CSS

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

Answer 4

 background: linear-gradient(90deg,  #639964 25%,#402180 94%); /* W3C */

完整背景上的CSS3渐变

4 个答案:

CSS

CSS