雪碧图的原理与实例解释

一、原理

1.多个图标组合成一张图片构成雪碧图，通过对不同部位的提取，实现不同效果显示
如下图（图1）：

2.雪碧图优点：加载一张图片在来对一张图片操作，相比于加载多张图片来说，占用资源更少，效率更快。

3.原理
（1）上图片左上角坐标为（0px 0px）,使用笛卡尔坐标系；

（2）上图有10个图标，上下两行两两对应；

（3）用一个与图标宽高相等的盒子来装一个图标，把图片设为盒子背景图片时整张图片都会显示在盒子里，这时要把图片大小放大500%；

（4）当鼠标移到盒子上时，移动图片，显示光亮图标。把图标上下图标为一组，分为5组；
第1组，坐标变化（0px 0px）- ->(0px -100px)
第2组，坐标变化（-100px 0px) - ->(-100px -100px)其余一次类推。

（5）盒子平铺会出现间隙，是因为两个div之间有换行符，可通过两种方法解决：
1.删掉换行符，div放在一行，但是影响代码可读性，美观性；

2.把这些盒子嵌套在一个大盒子中，大盒子字体设为无，不过要注意大盒子的宽度要与图标宽度总和+小盒子边框相等，大盒子宽度不够其他盒子会卡到下一行，大盒子宽度过大，会出现多余部分。

二、代码实现

代码实现如下：

三、文件搭建和图片

1.建一个名为：img 文件，把图1放进去，并把图1重命名为：share_icon.png
2.建一个html文件，放在img文件的同级目录

最后，如果本文对你有用，欢迎点赞。