安排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 />