身体上设置的 CSS3 渐变背景不会拉伸而是重复？答案

【问题标题】：CSS3 gradient background set on body doesn't stretch but instead repeats?身体上设置的 CSS3 渐变背景不会拉伸而是重复？
【发布时间】：2011-02-21 14:09:49
【问题描述】：

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

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

然后我最大化我的窗口（或者只是让它高于 300 像素），渐变将恰好是 300 像素高（内容的高度），然后重复以填充窗口的其余部分。

我假设这不是错误，因为它在 webkit 和 gecko 中是相同的。

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

【问题讨论】：

标签： css gradient

【解决方案1】：

应用以下 CSS：

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

编辑：在每个 cmets (Martin) 的主体声明中添加了 margin: 0;。

编辑：在每个 cmets (Johe Green) 的主体声明中添加了 background-attachment: fixed;。

【讨论】：

我还发现我需要在body 上添加margin:0;，否则我的页面底部会出现空白。
在 Chrome 和 Safari 中，body { height: 100% } 会导致页面（但不是渐变）向下延伸到视口之外。
我必须添加一个背景附件：已修复；到身体摆脱底部间隙（Webkit）。
将背景设置为主体，然后将 html 标记的高度设置为 100%，这在 Internet Explorer 中会发生奇怪的事情。 Here's an example (png).
确保background-repeat 和background-attachment 出现在您的background 规则之后。否则，背景可能仍会重复。

【解决方案2】：

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

例如：

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

【讨论】：

这对我测试的所有浏览器（Chrome [Mac]、Safari [Mac]、Firefox [Mac/Win7]、IE9 [Win7] 和 Opera [Mac]）都有效，没有滚动条的副作用“身高：100%”的解决方案。谢谢！
给那些使用 Sass/Compass 的人的注意事项。您不能直接在 mixin 中设置“固定”，因此要添加固定，您可以添加属性 background-attachment: fixed
如果您想让背景填充窗口或内容（以较大者为准），请使用min-height:100%（在兼容的浏览器中）
我能够使用 Compass 执行以下代码：@include background(linear-gradient(top, red 0%, blue 100%) fixed);
如何添加第三种颜色？

【解决方案3】：

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

您需要做的就是使用min-height: 100%; 而不是height: 100%;，您的渐变背景将延伸到内容的整个高度而不重复，即使内容是可滚动的。

像这样：

html {
    min-height: 100%;
}

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

不过还有第二个解决方案。

正如其他人所说，将值 fixed 添加到 background 声明中，将使渐变扩展到视口的整个高度。

像这样：

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

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

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

【讨论】：

除非您需要将 html 高度设置为 100%，例如如果您需要粘性页脚
太棒了！这真的很有帮助

【解决方案4】：

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

   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>

我已经在 FireFox 3.6、Safari 4 和 Chrome 中对此进行了测试，对于由于某种原因不支持样式化 HTML 标记的任何浏览器，我都将背景颜色保留在正文中。

【讨论】：

【解决方案5】：

设置html { height: 100%} 会对IE 造成严重破坏。 Here's an example (png). 但是你知道什么最有效吗？只需在<html> 标签上设置您的背景。

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

背景延伸到底部，不会出现奇怪的滚动行为。您可以跳过所有其他修复。这得到了广泛的支持。我还没有找到不允许您将背景应用于 html 标记的浏览器。它是完全有效的 CSS 并且已经存在了一段时间。 :)

【讨论】：

@Lynda 这不是很有帮助的反馈。您介意提供一个不起作用的案例吗？
抱歉含糊不清。我不确定为什么它不起作用。您可以将渐变添加到html，但在我的情况下它会在页面下方停止。添加background-attachment:fixed 确实解决了这个问题。我在不止一个网站上看到过这种情况，但一直找不到原因。
这个解决方案的重点是它可以跨浏览器工作（顺便说一句，在 2012 年）。但是您仍然没有指出您正在谈论的浏览器。如果您仍然遇到问题，请尝试添加html, body { height: 100%; }。
是的。它发生在 Firefox 和 Chrome 中（未在其他浏览器中测试），我尝试了高度和其他各种设置，但没有任何运气（背景附件除外）。哦，好吧，没什么大不了的，希望您的回答仍然适用于大多数人。 =>
还是要糊弄不重复和固定的。

【解决方案6】：

这个页面有很多部分信息，但不是完整的。这是我的工作：

在此处创建渐变：http://www.colorzilla.com/gradient-editor/
在 HTML 而不是 BODY 上设置渐变。
使用“background-attachment:fixed;”修复 HTML 上的背景
关闭 BODY 的顶部和底部边距
（可选）我通常会创建一个<DIV id='container'>，将我的所有内容放入其中

这是一个例子：

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 上针对各种大小和滚动需求的页面进行了测试。

【讨论】：

太棒了！我正在使用 colorzilla，主要答案对我不起作用。这个做到了。谢谢！ :)
为什么你更喜欢在 HTML 上做，而不是在 BODY 上？
@sashaikevich 好问题。 5年来我几乎没有看过这个答案，所以我根本不记得了。我这样做的原因甚至可能不适用于所有浏览器更新。如果你把它全部移到 body 上，我会很好奇它是否同样有效。
@RickSmith 不，我设计了 html 样式。但是，我确实将规则移到了刚才的身体上进行检查，这没有任何区别。也许这是一个旧的浏览器的东西......

【解决方案7】：

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

【讨论】：

如果渐变停止，默认背景设置为结束渐变颜色将是一个很好的解决方案，但它不仅会停止重复，因此只有在不支持渐变时才会看到默认背景。

【解决方案8】：

在末尾添加一个空格和fixed这个词就足够了。无需设置高度。

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

【讨论】：

最后一个括号和符号fixed之间的“空格”在background速记语法中是必需的。所以“空格”不是解决方案，而是符号fixed。这是一个不同的解决方案，因为与上面我的不同，渐变背景扩展了 viewport 的高度，而我的扩展了 content 的高度。我认为这也是一个很好的解决方案。
其实我收回了，最后一个括号和fixed之间的空格是不需要的。

【解决方案9】：

我无法在这里找到答案。
我发现在 body 中修复一个全尺寸的 div 效果更好，给它一个负的 z-index，并将渐变附加到它上面。

<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

【讨论】：

【解决方案10】：

我已经使用了这个 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/ 上创建自己的大渐变

/斯滕

【讨论】：

【解决方案11】：

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;

【讨论】：

请在您的解决方案的关键方面添加一些解释。

【解决方案12】：

这就是我所做的：

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%;
}

在我浮动body之前，顶部有一个空隙，它显示了html的背景颜色。如果我删除 html 的 bgcolor，当我向下滚动时，渐变会被剪切。所以我浮动身体并将其位置设置为相对，宽度设置为 100%。它适用于 safari、chrome、firefox、opera、internet expl.. 哦等等。 :P

你们觉得呢？

【讨论】：

【解决方案13】：

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

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

【讨论】：

高度 > 1420 px 的页面怎么样？