CSS精灵图

来源：

https://www.bilibili.com/video/BV14J4114768?p=251&spm_id_from=pageDriver

为什么需要精灵图

  一个网页中经常会应用很多小 的背景图像作为修饰，当网页中的图像过多时，服务就会频繁地接收和发送请求图片，造成服务器压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

精灵图原理

将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
使用总结：

  1. 精灵图主要针对于小的背景图片使用。
  2. 主要借助于背景位置来实现--background-position。
  3. 一般情况下精灵图都是负值（网页中坐标：x轴右边走是正值，左边走是负值。y轴上边走是负值，下边走是正值）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容