Xhtml 如何制作一个CSS精灵来控制多个DIV'；s

大家好

我有一个网站是。。。目前正在开发中

请注意，我非常熟悉CSS精灵，可以制作鼠标悬停/滚动精灵以及静态图像精灵。我在我的网站上使用了大约7或8个主要的精灵来控制大多数图像和多个鼠标覆盖（如菜单等）

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

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

您可以在此处查看我的CSS文件： 请注意，由于我正在进行更改，目前还没有完全组织或优化

请看一看css精灵，它们都位于底部，并有注释，以便您可以看到它们是哪些

我是否遗漏了一些明显的东西？也许我睡眠不足=0）

如果有人能给我指出一个教程，或者只是粘贴正确的编码和如何做的描述，那就太好了

---

非常感谢

根据您的评论，以下是我创建的小提琴的内容：

<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;
}

div{
宽度：100px；
高度：20px；
边框：1px实心#aaa；
边缘底部：5px；
背景图像：url（'http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG');
}
#一个{
背景位置：-15px 0；
}
#两个{
背景位置：-15px-27px；
}
#三{
背景位置：-15px-54px；
}
#四{
背景位置：-15px-81px；
}
#五{
背景位置：-15px-108px；
}

---

请在答案中张贴代码和标记的相关部分。：）举个例子也会很有帮助。如果你想垂直地重复你的精灵，图像的一部分必须跨越图像的整个高度。如果水平，则为整个宽度。因此，如果你想在水平和垂直方向上重复，就不能使用Spite。精灵最好的效果是你不想重复。否则，使用受到限制。您需要css3来选择要重复的图像的一部分，但浏览器支持有限。@urbanelementz-这把小提琴如何演示或不演示您要做的事情@urbanelementz-嗯。是的，我认为直接的答案是让精灵自己补偿，让图像周围的区域留白。我不认为这会使文件大小太大，但我还没有测试过。另一种选择可能是使用包装器div中包含的相对定位div来补偿您拥有的其他内容，这样您就可以使用大小合适的精灵来制作div。@urbanelementz-我现在还不依赖CSS3属性。此刻，我正在看《大勒博斯基》（可能是有史以来最伟大的电影）。我希望你全力支持我把注意力集中在那个家伙和沃尔特身上。