1

我正在尝试为我的 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即使已经在父容器中设置了精灵图像，我是否需要在每次使用它时都添加它？

关于维克拉姆

4

2 回答 2

6

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

于 2010-06-04T10:20:06.103 回答
0

尝试和改变

  <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 />
于 2010-06-04T10:15:59.007 回答