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

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

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

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

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


当前回答

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

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

其他回答

我已经使用了这个CSS代码,它为我工作:

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/上创建自己的伟大的渐变

/斯滕

关于之前的回答,如果内容需要滚动,将html和body设置为高度:100%似乎不工作。添加固定的背景似乎解决了这个问题-不需要高度:100%;

例如:

身体{ 背景:-webkit-gradient(线性,左上,左下,从(#fff),到(#cbccc8))固定; }

我在这里很难找到答案。 我发现在主体中固定一个全尺寸的div,给它一个负z索引,并附加渐变效果更好。

<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 >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

这是完整的样本 https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

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;

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

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

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