前端css基础知识点之sprite——雪碧（精灵）

前端css基础知识点之sprite——雪碧（精灵）

css sprite css精灵或css雪碧

把网页中一些背景图片整合到一个大文件中，然后利用

background-image、background-repeat、background-position

组合进行背景定位，适用于小图标

• 优点

减少网页的http请求,从而提高页面的性能

图片命名更容易

更换风格方便

• 缺点

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

/*代码写法*/
.box {
    width: 48px;
    height: 48px;
    background: url(tb.png) no-repeat 0 -120px;
}