如何使用延伸到頁面底部的純色漸變背景？

我試過這樣做的各種不同的方式，但迄今沒有成功。如何使用延伸到頁面底部的純色漸變背景？

基本上我想要的是沿着頁面的漸變（我使用的是背景圖片），然後一旦圖片結束，我想要一個背景顏色來接管（這樣頁面就不會轉向白色）。

我試過用不同的div標籤和類似的東西來分層等東西，但迄今爲止還沒有運氣。背景顏色會覆蓋圖像，或者顏色不會延伸到頁面的底部。

2011-11-29 Chris

您可能想要將其設置爲HTML或正文在您的CSS。你有任何的CSS代碼分享？ – Matt

這是我一直在使用的代碼： 'body { \t width：70％; \t margin-left：15％; \t background-image：url（backgrou.png）！important; \t background-repeat：repeat-x; \t background-color：＃ff7f2a; }' 但是，顏色只是覆蓋圖像。 – Chris

你可以只用你的身體一個背景：

body { 
    /* Your gradient image */ 
    background-image: url(my_gradient.png); 
    /* Color below the background image */ 
    background-color: #C0FFEE; 
    /* Only repeat from left to right */ 
    background-repeat: repeat-x; 
}

或者使用後臺速記

body { 
    background:#C0FFEE url('my_gradient.png') repeat-x left top; 
}

來源

2011-11-29 08:11:59 jantimon

你可能想要做這樣的事情：

body 
{ 
    background: #FFCC00 url('your-background.png') repeat-x; 
}

來源

2011-11-29 08:12:30

嘗試像這樣：

http://jsfiddle.net/pUKeT/

body{ 
    background: blue url(http://www.laserasecroydon.com/assets/images/blue-gradient.jpg) no-repeat fixed left top; 
}

它不漂亮，但這樣一來，你能看到的顏色應該接管

來源

2011-11-29 08:13:30 Matt

body{  
background:url("image.jpg") #COLOR no-repeat; 
}

來源

2011-11-29 08:14:23 samn

謝謝你們，我的工作了。我使用的CSS很好，這是問題的形象。它不是將背景設置爲白色，而是透明。因此，顏色通過並超過了漸變。我現在將背景設置爲白色，並且工作正常。

來源

2011-11-30 02:48:17 Chris

如何使用延伸到頁面底部的純色漸變背景？

回答

相關問題