Question

大家好！

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

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

我的问题：我有大约8-10个使用背景图像的DIV。截至目前，每个div都有自己的背景图像。要么我缺少一些非常简单的东西，要么我只是难倒，因为我似乎无法正确编码以便工作。

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

您可以在此处查看我的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/

如何制作一个CSS精灵来控制多个DIV的多个背景图像？

1 个答案: