我如何使用CSS精灵

Question

我有一个精灵，我想用它来定义一个类而不是一个id：

我想使用白色显示扩展选项，使用黑色显示扩展状态。对于非扩展状态，我有一个类sprite-right，并希望使用sprite-expanded来扩展状态。谁能引导我通过这个？我忘了粘贴我所做的......呃！

sprite-right
{
    overflow:hidden;
    width:16px;
    height:20px;
    cursor:pointer;
    background:transparent no-repeat 0 0;
    background-image:url('../images/arrows.gif');
}

Answer 1

设置起来非常简单。首先需要设置一个类来应用图像作为背景。然后为每个图标添加特定的类。然后在CSS中更改背景位置，高度和宽度以匹配每个图标的位置。这是一个例子：

.icon {
    background-image: url('path/to/image.png');
    display: block;
}

.icon.sprite-right {
    background-position: 0 0;
    height: 10px; // You can change these for each sprite
    width: 10px; // You can change these for each sprite
}
.icon.sprite-expanded {
    background-position: -10px 0; 
}
.icon.sprite-right:hover  {
    background-position: -20px 0;
}
.icon.sprite-expanded:hover {
    background-position: -30px 0;
}

然后，当您添加新的精灵时，只需调整位置，直到您可以看到图标，然后调整高度和宽度，直到您没有剪切图像。

Answer 2

如果你进行谷歌搜索，那里有许多很棒的教程。在处理简单的精灵时我会使用这个工具。

点击此链接：http://labs.engageinteractive.co.uk/nav-o-matic/

这是我分叉的codepen，所以我可以更好地理解sprite。

http://codepen.io/daugaard47/pen/lntzE

研究代码，它将开始对你有意义。 使用背景定位将精灵移动到所需的类/状态。

希望这有点帮助。

Answer 3

这篇文章应该有所帮助：http://mindthesemicolon.com/using-css-sprites/ 它通过代码笔示例解释了如何创建和使用精灵。