安排CSS Sprites和重复背景

Question

我正在尝试为我的webapp使用CSS Sprites。这里是我的网页布局：

<div id="container"> 
    <div id="header" /> <!-- part of CSS sprite --><br /> 
    <div id="content" /> <!-- repeats vertically, separate image --> <br /> 
    <div id="separator"> <!-- part of CSS sprite --><br /> 
    <div id="footer"> <!-- part of CSS sprite --><br /> 
</div> 

我尝试使用这个CSS：

#container { 
    background: url(../img/sprite.png) no-repeat top; 
    margin: 0px auto; 
    width: 800px; 
} 

#container #header {<br /> 
    background-position: 0px 0px; 
    height: 25px; 
} 

#container #content {< 
    background: url(../img/content.png) repeat-y; 
} 

#container #separator { 
    background-position: 0px -25px; 
    height: 25px; 
} 

#page-container #footer { 
    background-position: 0px -50px; 
    height: 25px; 
} 

什么这里发生过的是，只有前两个div得到显示（标题和内容）。分隔符和页脚不显示。检查Firebug显示他们在那里，只是没有得到显示。

添加此行开了窍：

#container, #header, #footer, #separator { 
    background: url(../img/sprite.png) no-repeat top; 
} 

那么，为什么会出现这种情况？我是否需要将精灵图像放在每个div中，即使它已经在父容器中设置了，我是否也使用它？

至于 维克拉姆

Answer 1

background属性是不会继承的（想象一下，如果它是会发生什么）。你可以把它放在你使用它的每个div中。或者可以使用background-image：inherit; CSS规则

Answer 2

尝试&变化

<div id="separator"> <!-- part of CSS sprite --><br /> 
    <div id="footer"> <!-- part of CSS sprite --><br /> 

to 

    <div id="separator"/> <!-- part of CSS sprite --><br /> 
    <div id="footer"/> <!-- part of CSS sprite --><br />