xhtml - 如何制作一个 CSS Sprite 来控制多个 DIV 的多个背景图像？

Question

大家好!

我有一个网站 http://www.urbanelementz.ca ...目前正在开发中。

请注意，我非常熟悉 CSS Sprite ，可以制作鼠标悬停/滚动 Sprite 以及静态图像 Sprite 。我在我的网站上使用了大约 7 或 8 个主要 Sprite 来控制大部分图像和多个鼠标悬停(例如菜单等)。

我的问题:我有大约 8-10 个使用背景图像的 DIV。截至目前，每个 div 都有自己的背景图像。要么我遗漏了一些非常简单的东西，要么我只是被难住了，因为我似乎无法正确地编写代码来工作。

我的问题:我知道如何制作 Sprite ，我知道如何链接到 Sprite ，但是当您使用“background-position: 0px 0px”选项时，它会移动背景图像的位置在 DIV 中而不是图像上的背景位置以显示正确的 Sprite 。

您可以在这里查看我的 CSS 文件: http://www.urbanelementz.ca/css/style.css请注意，由于我正在进行更改，目前它还没有完全组织或优化。

请查看位于底部的 css sprites 并提供评论，以便您了解它们是哪些。

我是否漏掉了一些明显的东西？也许我 sleep 不足。 =0)

如果有人可以向我指出教程或只是粘贴正确的编码和操作说明，那就太好了。

非常感谢!

Answer 1

根据您的评论，以下是我创建的 fiddle 的内容:

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>

div {
    width: 100px;
    height: 20px;
    border: 1px solid #aaa;
    margin-bottom: 5px;
    background-image: url('http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG');
}
#one {
  background-position: -15px 0;
}
#two {
  background-position: -15px -27px;
}
#three {
  background-position: -15px -54px;
}
#four {
  background-position: -15px -81px;
}
#five {
  background-position: -15px -108px;
}

http://jsfiddle.net/TFwdB/