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中使用精灵图像，即使它已经在父容器中设置，我也会使用它？

关心维克拉姆

Answer 1

后台属性不会被继承（想象一下如果会发生什么）。您可以将它放在您使用它的每个div中。或者也许使用background-image：inherit; CSS规则

Answer 2

尝试＆amp;改变

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

安排CSS Sprites和重复背景

2 个答案: