一、css Sprite雪碧图使用场景
浏览器通常很快就可以将文本显示出来，但图像往往会减慢页面的加载速度。这一现象在移动端尤为明显，为了解决这个问题，可以将多个图像拼合成单个背景图像（sprite），再通过CSS控制具体显示图像的哪一部分。
CSS雪碧即CSS Sprite，也有称之为CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上面，然后利用CSS北京定位来显示需要显示的图像部分。
CSS雪碧图使用场景
- 是静态图片，不随着用户信息的变换而变化；
- 小图片，图片容量比较小；（大图不建议拼成雪碧图）
- 加载量大的图片；
二、CSS Sprite雪碧图实现原理和方式
CSS Sprite的基本原理是将网站中需要用到的图片整合到一张单独的图片中，从而减少网站的HTTP请求数量。该图片使用CSS background 和background-position 属性渲染，这就意味着标签变得更加的复杂了，图片是在CSS中定义而不是在html中使用图像<img>标签
注意：拼合背景图的小图（X，Y）坐标为负值。以图片左上角的顶点为原点坐标，
根本上来说，就是通过控制一个层可显示区域范围的大小，通过打开一个窗口，进行背景图的滑动。
雪碧图的实现方式：
1、PS自动拼图 。
2、使用 sprite 工具自动生成。
（CSS sprite自动生成工具 —— CssGaga 是windows环境下快速生成雪碧图的工具，并且可以返回每个小图片的position代码 https://www.99css.com/cssgaga/）
多个图标图片（雪碧图）使用CSS样式显示
现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。如果，网站是挂在外网上，或者网速过低
css之background-position属性实现雪碧图
雪碧图就是CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，就是把多张小图标合并到一张图片上，然后用css的background-position来显示需要显示的部分。
CSS雪碧图（精灵图）使用
CSS雪碧图：CSS雪碧图 即 CSS Sprites，也有人叫它CSS精灵图。雪碧图的由来：一个网站的页面需要大量的小图片或者小图标，但是大量的图片如果放在服务器上，每次当打开网站并且向服务器发送请求
css中雪碧图(sprite)的使用及制作方法
雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。没有使用雪碧图时图标是这样一个个的单独文件：
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!