雪碧图／精灵图使用教程（CSS Sprites）

雪碧图就是将很多很多的小图标放在一张图片上,就称之为雪碧图

一、使用雪碧图的优点有以下几点：

1. 将多张图片合并到一张图片中，可以减小图片的总大小。
2. 将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

使用步骤：（首先理解下sprites图其实就是将一大块图用来做背景图，与普通背景图不同的是：只在某固定位置显示某部分图）

1. 找到页面上固定的图片（不会动态发生改变）

1. https://www.toptal.com/developers/css/sprite-generator

利用以上链接可以在线制作雪碧图

1. 将原来时img的图改成div，原img的css属性有限制宽高的属性的要保留

利用background-position属性可以用来“截取大背景图的某部分图”，参考在线生成雪碧图上的图片位置放入，最后再页面上调整适当位置

 

 

 

雪碧图的整个流程就说完了，可能你会遇到以下问题：

雪碧图太大了，放到指定位置只能显示一部分！

两个解决方法：1.上传雪碧图时就按照你需要的大小上传

2.使用background-size: 属性缩放整块背景图，这里要注意下缩放了背景图的大小，对应的background-position也要同比例缩放。