1. 首頁
  2. 問答
  3. 在溢出時重複使用CSS背景漸變

在溢出時重複使用CSS背景漸變

2015-02-23 85 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

相關問題

 相關問題