首页 > Web开发 > 详细

css 从大图片png取小图

时间:2021-05-20 15:40:00      阅读:22      评论:0      收藏:0      [点我收藏+]

坐标取出,建议从ps软件拿坐标,左上角为原点 X轴 Y轴 都是 0,0  往右往下都是负数

技术分享图片

 

 

 

 

每个小图标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>
    <div class="icon icon-set">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</form>

css 从大图片png取小图

原文:https://www.cnblogs.com/flms/p/14788573.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!