【HTML+CSS】CSS Sprite可乐图
【HTML+CSS】CSS Sprite雪碧图
1. 雪碧图的使用场景
(1). 静态图片，不随用户信息的变化而变化
(2). 小图片，图片容量比较小
(3). 加载量比较大
一些大图不建议拼成雪碧图，例如淘宝网站的导航图片都是使用的雪碧图。
2. 使用雪碧图可以减少http请求数量，加速内容显示。每请求一次，就会和服务器链接一次，建立链接时需要额外时间的。
3. 实现原理
使用background-position属性：
需要使用雪碧图的时候，便宜x和y的值就可以了。
4. 实现方式：
一种方式是使用PS手动拼图；
另一种方式是使用sprite工具自动生成一个大图，并返回了每一个小图的坐标点，软件：CssGaga。
5. 使用方式：
在我们需要添加雪碧图的地方使用<i>标签(icon)，然后在样式中添加：
i {
background:url(sp.pgn);
background-position:0 -10px;
float:left;
display:inline;
width:30px;
height:24px;
}
通过改变background-position中x和y的值来替换小图，注意x和y值都是小于等于0的值。