我如何使用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;
}

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