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

这样的事情应该有效：

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 3

如果您使用的是mac，则可以使用一些工具自动编写CSS文件。这些工具以有效的方式命令您的精灵，并为您编写CSS文件。您不需要与排序和计算像素坐标等进行斗争建议Sprite Master。

Answer 4

你的CSS究竟有什么用？ Spriting涉及在悬停（或其他状态）下更改图像的背景位置。

所以它真的只是

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

查看您的CSS会很有帮助。

如何使用精灵css

4 个答案: