[转载]CSS从大图片上截取小图标的操作 - 翟中龙 - 博客园

[转载]CSS从大图片上截取小图标的操作 – 翟中龙 – 博客园.

注:图片名称(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-sys">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
    </form>

 

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏