在主体上设置的CSS3渐变背景不会拉伸，而是会重复吗？

429

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

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

然后，我将窗口最大化（或使其高度大于300px），渐变将恰好是300px（内容的高度），然后重复进行以填充窗口的其余部分。

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

但是，是否有一种方法可以使渐变拉伸以填充窗口而不是重复？

css  gradient 
— JD伊萨克斯
source

Answers:

717

应用以下CSS：

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

编辑：添加margin: 0;到每个声明的正文声明（Martin）。

编辑：添加background-attachment: fixed;到每个声明的正文声明中（Johe Green）。

— 布莱恩·唐宁
source
4
我还发现我需要补充margin:0;，body否则页面底部会出现空白。
— 马丁2010年
8
在Chrome和Safari中，主体{height：100％}导致页面（但不是渐变）向下延伸到视口之外。
— thSoft 2010年
13
我必须添加背景附件：固定；使身体摆脱底部间隙（Webkit）。
— j7nn7k 2011年
4
将背景设置为正文，然后将html标记的高度设置为100％，这在Internet Explorer中确实很奇怪。这是一个示例（png）。
— 贾斯汀·力
21
确保background-repeat和background-attachment来后，你的background规则。否则，背景可能仍会重复。
— 凯伦2014年
159

关于先前的答案，如果内容需要滚动，则设置html和body为height: 100%似乎无效。添加fixed到背景似乎可以解决此问题-否need for height: 100%;

例如：

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

— 约书亚·路德（Joshua Rudd）
source
5
这对我测试过的每个浏览器（Chrome [Mac]，Safari [Mac]，Firefox [Mac / Win7]，IE9 [Win7]和Opera [Mac]）都有效，而没有“高度：100％”的滚动条副作用解。谢谢！
— pipwerks，2011年
7
给那些使用Sass / Compass的人的注释。您无法直接在mixin中设置“固定”，因此要添加固定，请添加属性background-attachment: fixed
— Kyle Mathews
2
如果您想让背景填充窗口或内容（以较大者为准），请使用min-height:100%（在兼容的浏览器中）
— cjk
我能够使用Compass执行以下代码：@include background（固定线性渐变（顶部，红色0％，蓝色100％））；
— mcranston18 2013年
如何添加第三种颜色？
— sbaden '16
17

我知道我晚会晚了，但是这是一个更可靠的答案。

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

像这样：

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}
— 里卡多·泽（Ricardo Zea）
source
除非您需要将html高度设置为100％，例如，如果您需要粘贴页脚
— apieceofbart
15

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

   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中对此进行了测试，对于某些出于某种原因不支持H​​TML标记样式的浏览器，我将背景色保留在主体中。

— 约翰·桑福德
source
13

设置html { height: 100%}可能会对IE造成严重破坏。这是一个示例（png）。但是你知道什么有效吗？只需在<html>标签上设置背景即可。

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

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

— 贾斯汀力
source
1
@Lynda反馈不是很有帮助。您介意提供一个无效的案例吗？
— 贾斯汀原力
很抱歉含糊。我不确定为什么它不起作用。您可以添加渐变，html但就我而言，它会在页面的下方停止。添加background-attachment:fixed确实可以解决问题。我已经在多个站点上看到了这种情况，但是还没有找到原因。
— 2015年
该解决方案的重点在于它可以跨浏览器运行（顺便说一下，在2012年）。但是您仍然没有指出您在说什么浏览器。如果仍然有问题，请尝试添加html, body { height: 100%; }。
— 贾斯汀部队
真正。它发生在Firefox和Chrome（没有在其他浏览器中进行过测试），并且我尝试了高度和其他各种设置，但没有任何运气（背景附件除外）。哦，嗯，​​没什么大不了的，希望您的回答对大多数人仍然有效。=>
— L84
仍然不得不傻瓜不重复和固定。
— MarsAndBack '18
12

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

  1. 在此处创建渐变：http : //www.colorzilla.com/gradient-editor/
  2. 在HTML而不是BODY上设置渐变。
  3. 使用“ background-attachment：fixed;”修复HTML上的背景。
  4. 关闭BODY的顶部和底部边距
  5. （可选）我通常创建一个<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进行了测试。

— 里克·史密斯
source
1
大！我使用的是colorzilla，主要答案对我不起作用。这个做了。谢谢！:)
— Filly 2014年
为什么偏爱在HTML而不是在BODY上进行呢？
— sashaikevich
@sashaikevich很好的问题。我五年来几乎没有看过这个答案，所以我完全不记得了。我这样做的原因甚至可能不适用于所有浏览器更新。如果您将它们全部移到身体上，我会很好奇它是否同样起作用。
— 瑞克·史密斯
@RickSmith不，我设置了html样式。但是，我确实将规则应用于现在的身体进行检查，但这没有什么区别。也许这是旧的浏览器内容……
— sashaikevich
4

脏; 也许您可以添加最小高度：100％；到html和body标签？或至少设置默认的背景颜色，即末端渐变颜色。

— 细分
source
1
如果渐变停止，将默认背景设置为结束渐变颜色将是一个很好的解决方案，但是它不仅会停止，而且会重复，因此只有在不支持渐变的情况下才能看到默认背景。
— JD Isaacks 2010年
2

我在这里无法获得答案才能上班。
我发现将全尺寸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

— 更多来自阿兰
source
0

我已经使用了此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/创建自己的渐变色

/ Sten

— 内西1964
source
-1 
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;
— 乔
source
1
请在解决方案的关键方面添加一些说明。
— 拉查（Rachcha）2014年
-1

这就是我所做的：

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

你们有什么感想？

— 灰熊
source
-4

而不是100％我只是添加了一些pixxel，现在它可以在整个页面上正常工作：

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }
— 桑德
source
3
高度大于1420像素的页面怎么办？
— VERITAS
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.