Web前端学习—基础篇(25)_css sprites是什么？它用来做什么？有什么优缺点？

4.18、css sprites精灵图

4.18.1、css sprites？

• 精灵技术、雪碧技术，也可以解释为css图像拼合或css贴图定位
• 将一堆小图整合在一张大图上，通过css属性“background-image、background-repeat、background-position”将图片显示出来，并通过背景图定位精确显示图片的位置，从而减少服务器对图片的请求数量

4.18.2、优缺点

• 优点
  • 减少网页的http请求，提高页面性能
  • 减少在图片命名上的困扰
  • 更换风格比较方便
• 缺点
  • 必须要先定容器的大小，背景图位置需要计算
  • 维护比较麻烦

4.18.3、使用步骤

- 制作一张具有多种状态的拼合图片
- 为要显示背景图片的盒子设置一个固定尺寸（width属性、height属性），以背景方式加载，让其局部显示
- 通过背景图定位属性控制不同的显示状态

4.18.4、css滑动门技术

核心：利用css精灵技术，盒子padding值撑开宽度