CSS3渐变背景设置在身体上不拉伸，而是重复?

好的，假设<body>内的内容的总高为300px。

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

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

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

但是有没有办法让渐变拉伸来填充窗口而不是重复?

当前回答

设置html {height: 100%}会对IE造成严重破坏。这里有一个例子(png)。但你知道什么最有效吗?只要在<html>标签上设置你的背景。

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

背景延伸到底部，没有奇怪的滚动行为发生。您可以跳过所有其他修复。这得到了广泛的支持。我还没有发现一个浏览器不让你应用背景的html标签。它是完全有效的CSS，而且已经有一段时间了。：）

其他回答

肮脏的;也许你可以添加一个min-height: 100%;到html，和主体标签?或者至少设置一个默认的背景色，它也是渐变结束的颜色。

应用下面的CSS:

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

编辑:添加边框:0;到每个注释的body声明(Martin)。

编辑:添加背景附件:固定;到每个注释的体声明(Johe Green)。

我知道我来晚了，但这里有一个更可靠的答案。

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

是这样的:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#b5e48c, #457b9d);
}

不过，还有第二种解决方案。

正如其他人所说，在背景声明中添加固定值，将使渐变扩展视口的全部高度。

是这样的:

body {
    background: linear-gradient(#b5e48c, #457b9d) fixed;
}

当然，你仍然需要声明min-height: 100%;在html中。

下面是CodePen中的一个演示，您可以使用这两种解决方案:https://codepen.io/ricardozea/pen/abwGBmz?editors=1100

设置html {height: 100%}会对IE造成严重破坏。这里有一个例子(png)。但你知道什么最有效吗?只要在<html>标签上设置你的背景。

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

加一个空格，加上“固定”这个词就足够了。不需要设定高度。

body{
    background: linear-gradient(#e4efe9,#93a5cf) fixed;
}

推荐文章