Question

我使用的是我页面上看起来很棒的渐变。如果您调整浏览器的大小，则渐变会完全匹配。但是，如果您向下滚动页面以查看内容，渐变开始重复，忽略我的背景重复：无重复规则。

滚动时是否有办法让渐变与页面的高度相匹配而不重复？

谢谢！

Answer 1

这就是我解决问题的方法，但我使用了一张图片（将渐变保存为PNG文件）。我相信这也适用于你的渐变。你可能需要弄乱百分比才能得到你想要的东西！

html{
background-image: url("yourGradientpicture.here");
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}

-Hoyt

Answer 2

Manish，您可以使用css属性代替background-image

    #grad {
  background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, blue); /* Standard syntax */
}

来源w3schools

Answer 3

如果针对所有HTML页面修复了渐变（假设您使用的是CSS渐变）并且您不希望任何重复，那么您可以尝试这种方法：

http://jsbin.com/nisawaboyu/1/

基本上将渐变应用于整个HTML页面，渐变的大小与内容大小相关联。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style>
html{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

}

    </style>


</head>
<body>



</body>
</html>

Answer 4

html, body {
height: 100%;
}

body {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

        /* Safari 5.1, Chrome 10+ */
        background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, #2F2727, #1a82f7);

        /* IE 10 */
        background: -ms-linear-gradient(top, #2F2727, #1a82f7);

        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #2F2727, #1a82f7);
  }

我从这里得到解决方案：http://cssmatter.com/blog/full-page-gradient-background-css/

如果没事，请告诉我。

有没有办法让渐变匹配网页的实际高度？

4 个答案: