当前访客身份:游客 [ 登录  | 注册加入尚学堂]
直播

helloworld

拥有积分:8346
莫问前路在何方!!!!

博客分类

笔记中心

课题中心

提问中心

答题中心

解答题中心

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

helloworld 发表于 2年前 (2014-08-22 15:14:27)  |  评论(1)  |  阅读次数(860)| 0 人收藏此文章,   我要收藏   


注:图片名称(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>




 

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183