关于css：在身体上设置的CSS3渐变背景不会拉伸，而是重复？


CSS3 gradient background set on body doesn't stretch but instead repeats?

好吧，假设中的内容总共高300像素。

如果我使用-webkit-gradient或-moz-linear-gradient设置的背景

然后我最大化我的窗口(或者只是让它高于300px)，梯度将正好是300px高(内容的高度)，然后重复以填充窗口的其余部分。

我假设这不是一个bug，因为webkit和gecko都是一样的。

但是有没有一种方法可以让渐变拉伸来填充窗口而不是重复？

应用以下CSS：

1
2
3
4
5
6
7
8
9
html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

编辑：根据评论在正文声明中添加了margin: 0;(martin)。

编辑：根据评论在正文声明中添加了background-attachment: fixed;(johe green)。

相关讨论

关于之前的答案，如果内容需要滚动，将html和body设置为height: 100%似乎不起作用。在背景中添加fixed似乎可以解决这个问题-不添加need for height: 100%;

例如。：

1
2
3
body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

。

相关讨论

以下是我为解决这个问题所做的…它将显示内容的整个长度的渐变，然后简单地回退到背景色(通常是渐变中的最后一种颜色)。

1
2
3
4
5
6
7
8
9
10
   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }

号

1
2
3
<body>
  Hello world!
</body>

我在firefox 3.6、safari 4和chrome中测试过，对于任何不支持HTML标签样式的浏览器，我都会将背景色保留在正文中。

设置html { height: 100%}可能会对ie造成破坏。下面是一个例子(png)。但你知道什么很管用吗？只需在标签上设置背景即可。

1
2
3
4
html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

。

背景延伸到底部，不会发生奇怪的滚动行为。您可以跳过所有其他修复程序。这得到了广泛的支持。我没有找到一个不允许您将背景应用于HTML标记的浏览器。它是完全有效的CSS，已经有一段时间了。：)

相关讨论

我知道我参加晚会迟到了，但这里有一个更确切的答案。

您所需要做的就是使用min-height: 100%;而不是height: 100%;，即使内容是可滚动的，渐变背景也不会重复地扩展整个视区的高度。

这样地：

1
2
3
4
5
6
7
html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}

号

相关讨论

这一页上有很多部分信息，但不完整。我要做的是：

  • 在此处创建渐变：http://www.colorzilla.com/gradient-editor/
  • 在HTML而不是正文上设置渐变。
  • 使用"background attachment:fixed；"在HTML上修复背景。
  • 关闭正文的上下页边距
  • (可选)我通常创建一个
    ，将所有内容放在

    • 下面是一个例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    html {  
      background: #a9e4f7; /* Old browsers */
      background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
      background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

      background-attachment: fixed;
    }

    body {
      margin-top: 0px;
      margin-bottom: 0px;
    }

    /* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
    #container
    {
      width: 800px;
      margin: auto;
      background-color: white;
      border: 1px solid gray;
      border-top: none;
      border-bottom: none;
      box-shadow: 3px 0px 20px #333;
      padding: 10px;
    }

    这已经通过IE、Chrome和Firefox在不同大小和滚动需求的页面上进行了测试。

    相关讨论

    脏的；也许你能加一个最小高度：100%；到HTML，和身体标签？或者至少设置一个默认的背景色，即结束渐变色。

    相关讨论

    我很难在这里找到答案。我发现把一个全尺寸的DIV固定在身体里，给它一个负的z索引，然后把梯度附加到它上面会更好。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <style>

      .fixed-background {
        position:fixed;
        margin-left: auto;
        margin-right: auto;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1000;
        background-position: top center;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .blue-gradient-bg {
        background: #134659; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
      }

      body{
        margin: 0;
      }

    </style>

    <body >
     
    </body>

    。

    这是一个完整的样品https://gist.github.com/morefromalan/8A4F6DB5CE43B5240A6DDAB611AFDC55

    我使用了这个CSS代码，它对我很有用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    html {
      height: 100%;
    }
    body {
      background: #f6cb4a; /* Old browsers */
      background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
      background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
      height: 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
      width: 100%;
      background-position: 0px 0px;
    }

    相关信息是，您可以在http://www.colorzilla.com/gradient-editor上创建自己的大渐变。/

    斯滕

    我就是这样做的：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    html, body {
    height:100%;
    background: #014298 ;
    }
    body {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
    background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
    background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

    /*I added these codes*/
    margin:0;
    float:left;
    position:relative;
    width:100%;
    }

    。

    在我浮体之前，上面有一个间隙，它显示了HTML的背景色。如果我删除HTML的bgcolor，当我向下滚动时，渐变会被剪切。所以我浮动了物体，把它的位置设置为相对，宽度设置为100%。它适用于Safari、Chrome、Firefox、Opera、Internet Expl。哦，等等。P

    你们觉得怎么样？

    1
    2
    3
    4
    background: #13486d; /* for non-css3 browsers */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
    background-repeat:no-repeat;
    相关讨论

    而不是100%，我只是添加了一些像素现在得到了这个，它适用于整个页面，没有间隙：

    1
    2
    3
    4
    5
    6
    html {    
    height: 1420px; }
    body {    
    height: 1400px;    
    margin: 0;    
    background-repeat: no-repeat; }

    。

    相关讨论