div {
width: 25px;
height: 25px;
background-image: url(img/568dfdbdN4f7d7ca3.png);
overflow: hidden;
}
p {
width: 25px;
height: 25px;
background-image: url(img/568dfdbdN4f7d7ca3.png);
background-repeat: no-repeat;
background-position: 0px -25px;
overflow: hidden;
}
<body>
<div></div>
<p></p>
</body>
就是设置图片显示的高度，将超过部分的高度隐藏，还有设置图片的显示位置，来调整显示那个小的icon；
如何生成CSS雪碧图：http://spritegen.website-performance.org/
原文：http://www.cnblogs.com/myFourLeaf/p/5270895.html