css可乐图

2012-11-23

css雪碧图???以前只是听说过雪碧图没用过，然后来了这里做的第一个活儿就涉及到他。因为怕不会用，就用他们原

css雪碧图

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

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

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

或是这样 css可乐图效果原样是

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

样式代码

.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哈哈~

热点排行

CSS

css可乐图