雪碧图：多个图片集成在一个图片中的图
使用雪碧图可以减少网络请求的次数，加快运行的速度。
使用雪碧图可以减少网络请求的次数，加快运行的速度。
首先需要给li设定一个恰当的固定的宽高
比如{ 24px;height: 24px;}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
需要用baocground-image: url();引入雪碧图
利用background-position: X Y;对雪碧图进行移动定位；X为雪碧图x轴平移，Y为雪碧图y轴平移(xy根据具体情况调整)
style{
ul>li:nth-of-type(1){
background-image: url("./sprite.png");
background-position: 0 0;
height: 24px;
24px;
}
ul>li:nth-of-type(2){
background-image: url("./sprite.png");
background-position: 0 -44px;
height: 24px;
24px;
}
ul>li:nth-of-type(3){
background-image: url("./sprite.png");
background-position: 0 -88px;
height: 24px;
24px;
}
ul>li:nth-of-type(4){
background-image: url("./sprite.png");
background-position: 0 -132px;
height: 24px;
24px;
}
ul>li:nth-of-type(5){
background-image: url("./sprite.png");
background-position: 0 176px;
height: 24px;
24px;
}
ul>li:nth-of-type(6){
background-image: url("./sprite.png");
background-position: 0 -220px;
height: 24px;
24px;
}
}
生成雪碧图后，通过background-position定位到当前的图片，如何设置当前图片的大小？
发现设置background-size作用于整张图，一放大就全偏了，再定位也可以，不过不方便。
而transform: scale();进行缩小和放大，这样可以很好地解决。