Question

我尝试获取背景渐变来拉伸页面的整个高度，而不是在视口结束时中断，就像在此处http://jsfiddle.net/szfiddle/hTU7d/

一样

但是，我还需要将html和body标签的高度保持在100％，以使主窗口不是视口大小的页面一直到底部，如下所示：{ {3}}，因此从高度100％部分取出其中一个标签不是一个选项，除非有另一种方法可以做到。

HTML

<body>
<div id="mainWindow">
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
<p>Content here</p>
</div>
</body>

CSS

body,html {
    height: 100%;
}

body{
  background: #70bg32;
  background-repeat:no-repeat;
  background: -moz-linear-gradient(top,  #183023 0%, #24543a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#183023), color-stop(100%,#24543a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #183023 0%,#24543a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #183023 0%,#24543a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #183023 0%,#24543a 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #183023 0%,#24543a 100%); /* W3C */
}
#mainWindow {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fffff6;
    min-height: 100%;
    position: relative;
}

Answer 1

Demo Fiddle

只需将background-attachment:fixed;添加到您的正文CSS

即可

More from MDN

background-attachment CSS属性确定该图像是否为 position在视口中固定，或与其一起滚动包含块。

用html和body重复背景渐变100％

1 个答案:

Demo Fiddle