雪碧图的定位

雪碧图：多个图片集成在一个图片中的图

使用雪碧图可以减少网络请求的次数，加快运行的速度。

 

　　首先需要给li设定一个恰当的固定的宽高

比如{width: 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;

　　　　width: 24px;

　　}

　　ul>li:nth-of-type(2){

　　　　background-image: url("./sprite.png");

　　　　background-position: 0 -44px;

　　　　height: 24px;

　　　　width: 24px;

　　}

　　ul>li:nth-of-type(3){

　　　　background-image: url("./sprite.png");

　　　　background-position: 0 -88px;

　　　　height: 24px;

　　　　width: 24px;

　　}

　　ul>li:nth-of-type(4){

　　　　background-image: url("./sprite.png");

　　　　background-position: 0 -132px;

　　　　height: 24px;

　　　　width: 24px;

　　}

　　ul>li:nth-of-type(5){

　　　　background-image: url("./sprite.png");

　　　　background-position: 0 176px;

　　　　height: 24px;

　　width: 24px;

　　}

　　ul>li:nth-of-type(6){

　　　　background-image: url("./sprite.png");

　　　　background-position: 0 -220px;

　　　　height: 24px;

　　　　width: 24px;

　　}

}

生成雪碧图后，通过background-position定位到当前的图片，如何设置当前图片的大小？

发现设置background-size作用于整张图，一放大就全偏了，再定位也可以，不过不方便。

而transform: scale();进行缩小和放大，这样可以很好地解决。

转载于:https://www.cnblogs.com/myshy/p/9534379.html