Question

我正在尝试将身体背景渐变拉伸到整个页面，与之有多少内容无关。

如果我使用以下css，则会在内容较长的情况下导致白页： http://jsfiddle.net/AE6dr/1/

html{
    height: 100%;
}
body {
    height: 100%;
    background-image: linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -moz-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -webkit-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -ms-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-repeat: no-repeat;
}

另一方面，取消设置html height可以获得大内容的良好结果： http://jsfiddle.net/L6qM8/

但不会延长小内容的背景： http://jsfiddle.net/6vaTX/1/

如何独立于内容获得线性渐变背景？

*编辑：摘要*

1：http://jsfiddle.net/AE6dr/1/ - ＆gt;向下滚动，不会有任何背景 2：http://jsfiddle.net/6vaTX/1/ - ＆gt;背景不会拉伸到底部 3：background-size: cover;无效

Answer 1

希望它会帮助你

background-size:cover; //or 100%;
background-attachment: fixed;

Demo

Answer 2

背景大小的组合：覆盖并将CSS应用于html而不是身体元素并移除高度100％对我有用。我引用了这篇文章：http://css-tricks.com/perfect-full-page-background-image/

http://jsfiddle.net/AE6dr/8/

html {
    background-image: linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -moz-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -webkit-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -ms-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover;
}

Answer 3

尝试：

html
{
   min-height:100%;
}

html元素没有占据iframe的整个高度。

Answer 4

尝试this。

<强> CSS：

body {
    background-image: linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -moz-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -webkit-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -ms-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
}

拉伸背景图像到页面

4 个答案: