css - 我如何使用 css Sprite

Question

我有一个 sprite，我想使用它定义一个类而不是一个 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;
}

然后，当您添加新的 sprite 时，您只需调整位置直到您可以看到图标，然后调整高度和宽度直到您不剪裁图像。