当前位置: 代码迷 >> HTML/CSS >> css可乐图
  详细解决方案

css可乐图

热度:193   发布时间:2012-11-23 22:54:33.0
css雪碧图

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

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

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

或是这样css雪碧图的小体会效果原样是css雪碧图的小体会


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

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

  相关解决方案