安排CSS Sprites和重复背景

Question

我正在尝试使用CSS Sprites为我的webapp.这是我的网页布局:

<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即使已经在父容器中设置了sprite图像,我是否需要在每次使用它时放入精灵图像？

关于维克拉姆

Answer 1

background属性不是继承的(想象一下如果会发生什么).您可以将它放在您使用它的每个div中.或者也许使用background-image:inherit; CSS规则