1. 首页
  2. 问答
  3. 在溢出时重复使用CSS背景渐变

在溢出时重复使用CSS背景渐变

2015-02-23 92 views
1

我使用渐变作为背景，并将其延伸至页面的尽头，但在滚动/溢出开始重复之后。即使在滚动之后，我如何将渐变拉伸到页面的底部？在溢出时重复使用CSS背景渐变

html 
{ 
    height:100%; 
    width:100%; 
} 

body 
{ 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
    min-height:100%; 
    background-repeat:no-repeat; 
    background-attachment: fixed; 

background: rgb(242,245,246); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0); /* IE6-9 */ 

}

来源

2015-02-23 joe

回答

5

看起来您错过了一些CSS属性。看看这个部分。

background-repeat:no-repeat; 
background-attachment: fixed; 
background: rgb(242,245,246); /* Old browsers */

您指定了长手性background-repeat和background-attachment，短手background属性之前。当background属性被读取时，它将重置先前设置的所有背景属性。

只需将它们移动到其他背景属性下方即可使用。

html 
 
{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
body 
 
{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
    min-height:100%; 
 
    background: rgb(242,245,246); /* Old browsers */ 
 
    background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ 
 
    background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0); /* IE6-9 */ 
 
    background-repeat:no-repeat; 
 
    background-attachment: fixed; 
 
}
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1> 
 
<h1>blah</h1>

来源

2015-02-23 05:38:17

+1

好吧，发现。这是最好的答案。 – sideroxylon 2015-02-23 05:42:26

+0

好的回答@亚历山大 – Sachin 2015-02-23 05:46:02

+0

很好的回答！此外，你可以使用** background-image **而不是* background *;那么订单就无关紧要了。 – vals 2015-02-23 06:24:26

0

把这个在separete body呼叫您的实际body后：

body { 
    background-attachment: fixed 
    background-repeat:no-repeat; 
}

你的CSS需要是这样的：

html 
{ 
    height:100%; 
    width:100%; 
} 

body 
{ 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
    min-height:100%; 



background: rgb(242,245,246); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0); /* IE6-9 */ 

} 

body { 
     background-attachment: fixed; 
     background-repeat:no-repeat; 
    }

订单原因

LIVE DEMO

来源

2015-02-23 05:37:58

+0

不需要单独的'body'选择器块;你可以在'filter'行之后放置'background-attachment'和'background-repeat'条目。 – Raptor 2015-02-23 06:10:00

+0

我知道，但这个解决方案已经在预览答案，所以这里是另一个:)，他们都很好， – 2015-02-23 06:20:37

1

您可以从html删除height:100%：

html 
 
{ 
 
    
 
    width:100%; 
 
} 
 

 
body 
 
{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
    min-height:100%; 
 
    background-repeat:no-repeat; 
 
    background-attachment: fixed; 
 

 
background: rgb(242,245,246); /* Old browsers */ 
 
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ 
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ 
 
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ 
 
background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ 
 
background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ 
 
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0); /* IE6-9 */ 
 

 
}
<div> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    <p>blah</p> 
 
    </div>

来源

2015-02-23 05:38:51 sideroxylon

0

您也可以尝试这种方式，添加空白格，这CSS附加到它（ http://jsbin.com/jugiyutibu/1/edit）

.bg 
{ 
    width:100%; 
    height:100%; 
    position:fixed; 
    z-index:-1; 
background: rgb(242,245,246); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0); /* IE6-9 */ 

}

来源

2015-02-23 05:41:23 PRAH

相关问题

 相关问题