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-add"> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    </div> 
</form>

 

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/15815.html

(0)
上一篇 2021年7月19日 18:45
下一篇 2021年7月19日 18:45

相关推荐

发表回复

登录后才能评论