css精灵 : 雪碧图
CSS精灵英文叫法 `CSS sprites`,通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”,其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position 精确的定位出背景图片的位置。
实现步骤:
1、限定容器的大小
2、图片拼合
3、背景定位
优点:
1、减少网页http的请求,从而大大提高页面的性能
2、图片命名上的困扰
3、更换风格方便
缺点:
1、必须要限定容器的大小
2、需要计算位置
使用场景:
适用于一般小图片(小图标、小背景),不适合大背景和大布局图片