码迷,mamicode.com
首页 > Web开发 > 详细

CSS从大图片上截取小图标的操作

时间:2017-04-06 19:54:54      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:截取   ack   splay   图片   div   http   示例   round   idt   

技术分享

注:图片名称(tabicons.png)每个小图标width:18px;height:18px从左上角坐标为(-0px;-0px;);

例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为(-20px;-0px;)中间依次加20个像素

截取小图标样式

.icon
{
    background: url(imges/tabicons.png) no-repeat;
    width: 18px;
    line-height: 18px;
    display: inline-block;
}
.icon-set
{
   background-position: -380px -200px;
}

.icon-add
{
   background-position: -20px 0px;
}

样式调用示例

<form id="form1" runat="server">
    <div class="icon icon-add">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</form>

 

CSS从大图片上截取小图标的操作

标签:截取   ack   splay   图片   div   http   示例   round   idt   

原文地址:http://www.cnblogs.com/henuyuxiang/p/6674927.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!