注:图片名称(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. oracle、mysql、sql server等;流行数据库的链接驱动配置

    系统的写博客的时间不多,但是还想一直写来坚持,就没事写写积累下来的知识点吧 #ORACLE #jdbc.driver=oracle.jdbc.driver.OracleDriver#jdbc.url= ...

  2. jQueryMobile控件之页面切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. MySQL日期 字符串 时间戳互转

    平时比较常用的时间.字符串.时间戳之间的互相转换,虽然常用但是几乎每次使用时候都喜欢去搜索一下用法:本文将作为一个笔记,整理一下三者之间的 转换(即:date转字符串.date转时间戳.字符串转dat ...

  4. [Java Basics] Reflection

    For every type of object, the Java virtual machine instantiates an immutable instance of java.lang.C ...

  5. IOS7 ~ Xcode5 制作 framework

    一.Framework 简介(Introduction to Framework Programming Guide) Mac OS X 扩展了 framework 的功能,让我们能够利用它来共享代码 ...

  6. ps esc 问题

    最近经常发现esc键突然变得不能用了.主要是使用搜狗输入法时使用esc键取输错的字,因此还以为是搜狗的问题,后来突然想到可能是因为打开某个软件导致esc不能用,最后发现居然是ps,在网上查了后发现很多 ...

  7. cocos2d-html5 让图层阻挡下层触碰事件

    目前最新版本是3.8.1,基本上基于3.x之后的都可以这样处理: 给当前图层一个成员变量:_touchListener 一个成员方法: onTouchBegan:function(touch,even ...

  8. mySql-通过group by分组

    当我们想查询主表和子表的信息时,我们首先会通过主表的id和子表中的主表id关联 如现有主表:tbl_enquire_price(询价表)和子表:tbl_enquire_price_detail(询价详 ...

  9. ajax-1:基本实现原理

    一.什么是Ajax? Asynchronous JavaScript and XML(异步JavaScript和XML) 二.实现步骤 3.Open方法 三个参数的含义 1.提交方式 Form-met ...

  10. 正向代理与反向代理的区别【Nginx读书笔记】

    正向代理的概念 正向代理,也就是传说中的代理,他的工作原理就像一个跳板, 简单的说, 我是一个用户,我访问不了某网站,但是我能访问一个代理服务器 这个代理服务器呢,他能访问那个我不能访问的网站 于是我 ...