web精灵技术

  css精灵：  雪碧图

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

        实现步骤：

            1、限定容器的大小

            2、图片拼合

            3、背景定位

 优点:

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

            2、图片命名上的困扰

            3、更换风格方便

        缺点：

            1、必须要限定容器的大小

            2、需要计算位置

        使用场景：

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