排列CSS精灵和重复背景

我正在尝试为我的webapp使用CSS精灵。以下是我的网页布局：

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

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

关于 维克拉姆

尝试改变

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

尝试改变

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

---

背景属性不是继承的，想象一下如果它被继承会发生什么。你可以把它放在你使用它的每个div里。或者可以使用背景图像：继承；CSS规则

后台属性不是继承的，想象一下如果继承会发生什么。你可以把它放在你使用它的每个div里。或者可以使用背景图像：继承；CSS规则

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