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

It's pretty simple to set up. You first need to set a class for applying the image as a background. Then add specific classes for each icon. Then in your CSS you change the background position, height and width to match the location of each icon. Here is an example:

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

Then, as you add new sprites you simply adjust the position until you can see the icon and then adjust the height and width until you are not clipping the image.

Answer 2

如果您进行 Google 搜索，那里有很多很棒的教程。在处理简单的精灵时，我经常使用这个工具。

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

这是我分叉的一个代码笔，所以我可以更好地理解精灵。

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

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

希望这有所帮助。

Answer 3

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