css雪碧图+移入变化图片

雪碧图也叫精灵图，就是把一个个小图标合并在一张图上，通过background-position定位来显示相对应的图片。

所有小图标集中在一个图片上，这样就可以减少http请求，提高页面访问速度。

代码如下:

.sprite{
    width: 130px;	
    height: 140px;
    background: url('./sprite.jpg');
    background-position: -200px -183px;
    }
    
<div class="sprite">
    </div>

页面显示：

注意：background-position: -x -y;

第一个值是距离左边的距离，第二个值是距离上面的距离，用PS量一下就行了

想要移入变化图片的话，hover用同样的方法就可以了，只需要改变position

.sprite{
    width: 130px;
    height: 140px;
    background: url('./sprite.jpg');
    background-position: -200px -183px;
 }
.sprite:hover{
    width: 130px;
    height: 140px;
    background: url('./sprite.jpg');
    background-position: -396px 0px;
 }
 
  <div class="sprite">
    </div>