本文共 599 字，大约阅读时间需要 1 分钟。

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

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

代码如下:

.sprite{    width: 130px;	    height: 140px;    background: url('./sprite.jpg');    background-position: -200px -183px;    }    
   
    
   

页面显示：

注意：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; }   
   
    
   

转载地址：http://mzrgn.baihongyu.com/