如何使用精灵CSS
答
.sprite {
background-image: url("pathto/facebook_signin.png");
background-position: 0 0;
}
.sprite:hover {
background-position: 0 16px /*or whatever the y position of the 2nd button is*/
}
.sprite:active {
background-position: 0 32px /*or whatever the y position of the 3rd button is*/
}
答
什么是不工作在你的CSS? Spriting涉及在悬停(或其他状态)上更改图像的背景位置。
所以它实际上只是
#element {
background-position-y: 10px;
}
#element:hover {
background-position-y: 0px;
}
将是有益的,看看你的CSS。
答
像这样的东西应该工作:
a.fb {
display: block;
background: ("/path/to/sprite.png") 0 0 no-repeat; /* start with normal state */
width: 150px;
height: 18px;
text-indent: -9999px; /* for image replacement */
}
a.fb:hover,
a.fb:focus {
/* hover and focus state */
background-position: 0 -20px;
}
a.fb:active {
/* click state */
background-position: 0 -40px;
}
答
如果你是在Mac上,你可以使用一些工具来自动写你的CSS文件。这些工具以有效的方式订购你的精灵,并为你编写CSS文件。您不需要与订购和计算像素坐标等进行抗争。我建议使用 Sprite Master。
只使用没有-y的位置并给出两个值。这个语法不是很好的支持。 (可悲) – meo 2011-01-27 20:54:21