雪碧图

雪碧图

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;
}