注:图片名称(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从大图片上截取小图标的操作的更多相关文章

  1. CSS从大图片上截取小图标的操作(转)

    一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...

  2. CSS从大图片上截取小图标的操作以及三角形的画法

    #name{ background:url(images/name.png) no-repeat 2px 2px; background-position: -2px -70px;//其中这个是定位图 ...

  3. CSS从大图片上截取小图标

    一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...

  4. <转载>使用css让大图片不超过网页宽度

    让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度! 接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问 ...

  5. wangEditor大图片上传问题

    wangEditor上传大图片时候会 上传超时.后端没有问题,我百度很多,又去群里问,都得不到答案.最后问同事,有个属性  editor.config.uploadTimeout = 10000000 ...

  6. 大图片上传(ImageIO,注意有的图片不能上传时因为他是tiff格式)

    一下是必要的: 1.enctype="multipart/form-data" 2. //不要使用myeclipse自动生成的get.set方法(struts2中的用法) publ ...

  7. css:自己实现一个带小图标的input输入框

    有小图标的input输入框<input type="text" placeholder="输入手机号" style="background:ur ...

  8. css实现在图片上显示文字

    一. 准备工作 1. 点击此下载 相关的文件 二. 浏览器中运行 play-img.html 文件,即可显示效果 三. 效果图

  9. java给图片写正反字体,并将二维码写到图片上,代码实现

    /** * @param filePath * 源图片路径 * @param markContent * 图片中添加内容 * @param outPath * 输出图片路径 字体颜色等在函数内部实现的 ...

随机推荐

  1. Sharepoint的javascript客户端对象模型获取其他站点的list

    获取当前站点(子站点而不是站点集)下的list var clientContext = new SP.ClientContext.get_current(); var list=clientConte ...

  2. 应用容器Application container

    应用容器是最基本的组件,用于布局的容器. 属性 样式 事件 默认白边各24像素,默认为浏览器大小可以设置整体背景 边距等. 根应用文件就是第一个加载的文件.

  3. iOS-服务器文件断点下载

    文件下载基本步骤:1.获取下载链接,创建响应发送请求.(使用异步请求,避免因文件过大下载时间长而阻塞主线程).2.当接到响应时在下载目录中创建文件.创建文件使用NSFileHandle进行文件内部处理 ...

  4. 腾讯优测| 让Android屏幕适配开发更简单-Google百分比布

    文/腾讯优测工程师 吴宇焕 腾讯优测优社区干货精选~ 相信开发同学都被安卓设备碎片化的问题折磨过,市面上安卓手机的主流屏幕尺寸种类繁多,给适配造成很大的困难.就算搞定了屏幕尺寸问题,各种分辨率又让人眼 ...

  5. cocos2d 中显示系统时间

    用到的两个方法先贴上 这个是时间回调 每分钟回去调用一次时间设置方法 //定时更新状态栏上的时间 void MGameScene::update(float dt) { ; fpassedTime + ...

  6. Python条件语句

    1.简介 多个条件判断,用elif语句. 如果判断需要多个条件需同时判断时,可以使用 or (或),表示两个条件有一个成立时判断条件成功: 使用 and (与)时,表示只有两个条件同时成立的情况下,判 ...

  7. python 函数可变长参数

    python中的可变长参数有两种: 一种是非关键字参数(*元组),另一种是关键字参数(**字典) 非关键字可变长参数: """ 非关键字可变参数,一个星号作为元组传入函数 ...

  8. Git 常用命令整理

    初始化配置 #配置使用git仓库的人员姓名 git config --global user.name "Your Name Comes Here" #配置使用git仓库的人员em ...

  9. openssl 心脏滴血

    yum -y update openssl openssl verson rpm -q --changelog openssl | grep CVE-

  10. php微信接口实例

    <?php /** * wechat php test */ //define your token //定义TOKEN秘钥 define("TOKEN", "we ...