CSS 精灵（雪碧图、精灵图）、滑动门

概述

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

1、精灵图的原理

• 将页面中的背景图合并成一张图片
• 利用背景属性，使不同元素显示图片的不同部分

实现步骤：

1.测量图片大小

2.通过引入背景图片，用背景定位实现

2、css sprites的优缺点

• 优点：

1.减少网页的http请求，提高页面的性能

2.减少在图片上的命名困扰

3.更换网页风格方便

• 缺点：

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

2.背景图位置需要计算

3、适用场景

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

二、滑动门

概述：

css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容

实例预览