如何使用CSS在网页背景中拉伸标题

http://www.stumbleupon.com/

http://www.mixx.com/

这两个网站都有一个背景标题在页面上展开,而内容居中并覆盖宽度的80%,并且与布局的其余部分完全一致.

我对这两个网站特别感兴趣,因为标题有两种背景颜色,而不仅仅是一种.

我确信网上有很多教程,但我没有要搜索的关键字.

它被background-image设置为body属性background-repeat:

background-repeat: repeat-x;

更多:http://www.w3schools.com/css/pr_background-repeat.asp

编辑:至于你的内容居中 - 我这样做:

然后设置width包装器到值(大多数960px).然后,当你设置它的边距时0 auto,它会居中.

#wrapper{
  margin: 0 auto;
}

分析stumbleupon.com:

"标题"实际上包含两个 div:wrapperHeader和wrapperNav.这两个有不同的背景颜色.这些div只有一个具有CSS属性的子节点

margin: 0 auto

这导致水平居中.

此属性也分配给内容div,因此标题,导航和内容始终居中.当然,这需要为这些元素设置一些宽度.

结构如下所示:

    

            
    
  


    

        
Discover
        
Favorites
        
Stumblers
    
   


    
 
    
 

如果你使用Firebug for Firefox,你可以自己轻松地分析这些元素.