大家好!
我有一个网站 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)
如果有人可以向我指出教程或只是粘贴正确的编码和操作说明,那就太好了。
非常感谢!
最佳答案
根据您的评论,以下是我创建的 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;
}
关于xhtml - 如何制作一个 CSS Sprite 来控制多个 DIV 的多个背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6398642/