不同顏色的身體背景

我對body元素設置爲background-image的圖像存在問題，但由於頁面長度不同，無法正常工作。有沒有辦法爲每個主HTML元素添加不同的背景顏色？不同顏色的身體背景

例如，在這website我需要在標題周圍的身體顏色是白色，然後網站的主要容器有一個灰色的漸變，最後是頁腳有一個灰色的純色。

後來編輯：基於約瑟夫·西爾伯的建議，我讀過的文章Full Browser width Bars和評論，我發現我的問題非常簡單的解決辦法，你可以在下方或jsFiddle代碼中看到：

#header { 
background: white; 
margin: 0 -2000px; 
padding: 0 2000px; 
} 
#main { 
background: green; 
margin: 0 -2000px; 
padding: 0 2000px; 
} 
#footer { 
background: gray; 
margin: 0 -2000px; 
padding: 0 2000px; 
} 
.content { 
overflow-x: hidden; 
}

甚至更高版本的更新：，如果你有水平滾動問題overflow-x屬性應用到HTML元素，以及：

html, body { 
overflow-x: hidden; 
}

來源

2012-07-31 George Grigorita

W¯¯你認爲帽子是「主要的HTML元素」嗎？ – 2012-07-31 18:34:23

請查看：[完整瀏覽器寬度欄]（http://css-tricks.com/full-browser-width-bars/）。 – 2012-07-31 18:38:19

@Diodeus - 當我說'主HTML元素'時，我想'header'，'body'和'footer'並不重要，但是我可以綁定到div的任何東西都可以。 @JosephSilber - 謝謝，我現在就來看看。 – 2012-07-31 18:41:33

我這樣做是通過創建可重用.content DIV用一個固定的寬度，我把每個部分內，像這樣：

<div id="header"> 
    <div class="content"> 

    </div> 
</div> 
<div id="main"> 
    <div class="content"> 

    </div> 
</div> 
<div id="footer"> 
    <div class="content"> 

    </div> 
</div>

指定要用於每個部分父div的背景顏色，從而將「自然跨瀏覽器窗口的寬度「拉伸：

#header {background: #000;} 
#main {background: #ccc;} 
#footer {background: #fff;}

然後給.content一個固定的寬度：

.content { 
    margin: 0 auto; 
    width: 960px; 
}

來源

2012-07-31 18:58:03 daGUY

不同顏色的身體背景

回答

相關問題