css可乐图

css雪碧图

   以前只是听说过雪碧图没用过，然后来了这里做的第一个活儿就涉及到他。因为怕不会用，就用他们原来切的，那个调的费事啊，算那个background-position困难的啊。原因是他们的雪碧图切放在了一起，没有留有空隙，所以，只能用一个废标签去专门放一个图标。像下面这样的：

。。。。
   <dl>
      <dt><span class='icon png_trans'></span>您还没上传头像呢？</dt>
      <dd>上传头像有利于其他用户更好的了解您，<a href="file">点击这里上传</a></dd>
    </dl>
。。。

我原本以为雪碧图只能这样用，也就是专门用一个废标签来放图标，而不能是把图标放在语义标签里作为背景。今天我自己切雪碧图，我按照他们在效果图里面原本什么位置多大间距就保持原样，然后把它们选出来，放在一个新建的文件里面，像这样：效果图原样是

或是这样效果原样是

这样就不需要那个废标签啦，下面是第一个图和第二个图的代码

<div class="changeStatus">
     <span class='error'>提示信息：删除失败！</span>
     <span class='success'>提示信息：删除成功！</span>
     <span class='worning'>提示信息：警告！</span>

</div>

样式代码

...

background:url(../../images/manage/tip.png) 10px 6px no-repeat #FFDFDF;

...

<div class="btnlist">
       <input type="checkbox" />全选
      <a href="#"><span  class='del'>删&nbsp;&nbsp;除</span></a><a href="#" ><span class='reverse'>新&nbsp;&nbsp;增</span></a><a href="#"><span class='change'>修&nbsp;&nbsp;改</span></a>
</div>

样式代码

.btnlist span.del{
 background:url(../../images/manage/optlist.png) -99px -4px no-repeat;

}
.btnlist span.reverse{
 background:url(../../images/manage/optlist.png) -3px -4px no-repeat;
}
.btnlist span.change{
 background:url(../../images/manage/optlist.png) -51px -4px no-repeat;
}
这样而且很好给background-position做定位，基本上几秒一个图的事情，真是方便快捷啊，O(∩_∩)O哈哈~