雪碧图
雪碧图
CSS Sprite也叫CSS精灵图,CSS雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含一张大图中去
优点
- 减少图片的字节
- 减少网页的http请求,从而大大的提高页面的性能
原理
- 通过
background-image
引入背景图片 - 通过
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;
}