如何使用精灵CSS

Question

可能重复：
Best Way to Sprite Images?

我有我要使用用户登录到网站下面的图片。

http://dl.dropbox.com/u/7468116/facebook_signin.png

但是我不能够使CSS正常工作。

Answer 1

.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*/ 
} 

Answer 2

什么是不工作在你的CSS？ Spriting涉及在悬停（或其他状态）上更改图像的背景位置。

所以它实际上只是

#element { 
    background-position-y: 10px; 
} 
#element:hover { 
    background-position-y: 0px; 
} 

将是有益的，看看你的CSS。

Answer 3

像这样的东西应该工作：

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

Answer 4

如果你是在Mac上，你可以使用一些工具来自动写你的CSS文件。这些工具以有效的方式订购你的精灵，并为你编写CSS文件。您不需要与订购和计算像素坐标等进行抗争。我建议使用 Sprite Master。