如何使CSS精灵能够控制多个DIV的多个背景图像？

Question

大家好！

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

请注意，我非常熟悉CSS精灵，可以制作鼠标翻转/翻转精灵，以及静态图像精灵。我使用大约7或8个主要的精灵在我的网站上，控制大多数的图像和多个鼠标(如菜单等)。

我的问题：我有大约8-10个使用背景图像的DIV.到目前为止，每个div都有自己的背景图像。要么我错过了一些非常简单的东西，要么我只是感到困惑，因为我似乎无法正确地编码它来工作。

My问题:我知道如何制作精灵，我知道如何链接到精灵，但是当您使用“背景位置:0px0px”选项时，它将移动DIV中的背景图像位置，而不是图像上的背景位置，以显示正确的sprite。

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

请看一下css精灵，它们都位于底部，并有评论，这样你就可以看到它们是什么了。

，我是不是漏掉了一些明显的东西？也许我被剥夺了睡眠。=0)

如果有人能给我指点教程，或者贴上正确的代码和如何做的描述，那就太好了。

，非常感谢！

Answer 1

根据你的评论，下面是我创作的小提琴的内容：

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