不同颜色的身体背景

我对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

不同颜色的身体背景

回答

相关问题