CSS精灵图

CSS Sprite

CSS Sprite也叫CSS精灵图，CSS雪碧图 是一种网页图片应用处理方式。他允许你将一个页面涉及到的所有零星图片都包含到一张大图上面去

优点

1，减少图片字节

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

原理

1，通过background-image引入背景图片

2，通过background-position把背景图片移动到自己需要的位置

实例

<i class = "icon1"></i>

<i class = "icon2"></i>

 

.icon1{
display:block;
background-image:url(1.png);
background-position:-20px 0;
width:45px;
height:70px;
}
.icon2{
display:block;
background-image:url(1.png);
background-position:-93px -84px;
width:45px;
height:70px;
}