在身上设置的CSS3渐变背景不会伸展，而是重复？

2018-06-04 22:05:47

好的，说<body>里面的内容总计300px高。

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

然后，我最大化我的窗口（或者只是使其高于300像素），梯度将正好300px高（内容的高度），并重复填充窗口的其余部分。

我认为这不是一个bug，因为它在webkit和gecko中都是一样的。

但有没有办法让梯度拉伸来填充窗口而不是重复？

应用以下CSS：

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

编辑：添加margin: 0; 以每个评论的身体声明（马丁）。

编辑：添加background-attachment: fixed; 到每个评论的身体声明（Johe Green）。

关于以前的答案，如果内容需要滚动，将html和body设置为height: 100%似乎不起作用。添加fixed到背景似乎修复 - need for height: 100%;

例如：

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

以下是我所做的解决此问题的方法......它将显示内容全长的渐变，然后简单回退到背景颜色（通常是渐变中的最后一种颜色）。

   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');
   }

<body>
  <h1>Hello world!</h1>
</body>

链接地址: http://www.djcxy.com/p/15803.html

上一篇: CSS3 gradient background set on body doesn't stretch but instead repeats?

下一篇: While applying opacity to a form, should we use a decimal or a double value?