Question

我有一个跨浏览器的CSS渐变，例如：

#background {
    background: #1E5799; /* old browsers */
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
}

但我需要它跨越整个页面的高度，而不仅仅是视口。换句话说，我需要将样式应用于与整个页面具有相同高度的元素，通常为body或html。

进一步的并发症： 我还使用sticky footer，要求html和body设置为100％高度。因此，将样式应用于它们会导致仅填充视口。

我甚至不确定我所要求的是否可行，但任何帮助都会受到赞赏。

Answer 1

html body {
   min-height: 100%;
}

即使页面可滚动，min-height属性也会占用总高度，但是高度属性会将活动视口的高度设置为100％。

这适用于跨浏览器！

Answer 2

基于Kyle的解决方案，以及sticky footer中的其他样式，这是最终有效的解决方案：

.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -250px;
 background: #1E5799; /* old browsers */
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */ } /* corresponds to height of #footer */

#body-wrapper {

    height: 100%;
    width: 100%;
}

使用以下html：

<body>
<div id="body-wrapper">
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</div>
</body>

Answer 3

另一个选项，如果您希望渐变仅缩放到视口，但在滚动时保持渐变。因此，不是绘制文档整个高度的梯度，而是仅保留相对于可见的高度。（尝试一下，你会看到我在说什么）

background-attachment: fixed;

Answer 4

您可以将页面的整个内容包装在背景div中，然后将其设置为该内容。这样，包装div将填满您的所有内容，背景将在整个页面中展开。

HTML：

<body>
<div id="background-wrapper">
<!--all your content-->
</div>
</body>

CSS：

#background-wrapper {
    background: #1E5799; /* old browsers */
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
    height: 100%;
    width: 100%;
}

应该这样做：）

Answer 5

你不需要包装器：

CSS：

body{
    width: 100%;
    height:100%;
    background-repeat:no-repeat !important;
    margin:0; padding:0;
    background: #603813; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28abe2', endColorstr='#ffffff'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#28abe2), to(#ffffff)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #28abe2,  #ffffff); /* for firefox 3.6+ */

}

示例HTML：

<body>

 <div id="headerBG">
  content goes here  content goes here  content goes here  content goes here
  content goes here  content goes here  content goes here  content goes here 
  content goes here  content goes here  content goes here  content goes here
  content goes here  content goes here  content goes here  content goes here 
 </div>

 <div id="container"><!--start container-->
  <div id="content"<!--start content-->
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
  </div><!--end content-->
 </div><!--end container-->

</body>

如果您的div中没有任何内容，则不会显示渐变！ :)希望这有帮助！

Answer 6

html, body {line-height:1.5;background:#23538a;

background: -moz-linear-gradient(top,  #ffffff 0%, #23538a 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#23538a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#23538a 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#23538a 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#23538a 50%); /* IE10+ */
background: linear-gradient(top,  #ffffff 0%,#23538a 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
}`

如何让CSS3渐变跨越整个页面的高度，而不仅仅是视口？

6 个答案: