css精灵图的原理及优缺点

1、CSS 精灵

概述：

CSS精灵英文叫法 CSS sprites，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。

2.1 精灵图的原理

2.1.1 实现步骤

1. 通常要限定容器大小

2. 图片拼合

3. 背景定位

2.1.2 优缺点

优点

• 减少网页的 http 请求，从而大大的提高页面的性能

• 图片命名上的困扰

• 更换风格方便

缺点

• 必须要限定容器大小符合背景图元素位置

• 需要计算位置。

2.1.3 应用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。