精灵精灵图的使用小技巧

制作精灵图

1、准备透明画布

    1)预设为web**
    2）背景：透明画布**

2、选择图形

  1）可选单个或多个 复制粘贴
  2）放在画布上面 选好位置，最好单个一行

3、存储

存储格式为png

4、使用精灵图

html调用css样式

css给个类名，设置属性值 引用的精灵图地址url

/*整理可以使用的精灵图 精灵图 */
.icons{    background: url(../images/default_icon_bg.png) no-repeat;}

引用精灵图某个图

/* 引用精灵图 */
.phone{    
/* 把文字挤走 */    
display: inline-block;    
/* 根据图上显示宽高设置 */    
width: 10px;    height: 14px;    
/* 覆盖另一块类名区域 */    
background-position: -510px -13px;    
/* 作垂直对齐 */    
vertical-align: middle;
/* 调整位置 */        
margin-top: -2px;    
margin-right: 5px;
}