注:图片名称(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. Python的平凡之路(7)

    一.面向对象高级语法部分   1.静态方法.类方法.属性方法                                                                       ...

  2. PHPExcel 导出表格 不知道好不好用

    PHPExcel类是php一个excel表格处理插件了,下面我来给大家介绍利用PHPExcel类来导入与导出excel表格的应用方法,有需要了解的朋友不防参考参考(PHPExcel自己百度下载这里不介 ...

  3. 图片过大导致OOM

    原文:http://www.codeceo.com/article/android-load-image-oom.html 一.分析 在加载图片过程中出现的OOM的几种情况: 1. 加载的图片过大 2 ...

  4. 正则验证 手机号 QQ号和邮箱

    + (BOOL) validateEmail:(NSString *)email{    NSString *emailRegex = @"^[\\w-]+(\\.[\\w-]+)*@[\\ ...

  5. CI框架源码分析

    这几天,把ci源码又看了一遍,于是有了新的收获.明白了在application目录下core文件夹的作用,就是用来写ci核心文件的扩展的, 而且需要在配置文件中添加类前缀MY_. CI框架整体是但入口 ...

  6. Python 基礎 - if else流程判斷

    hmm~前面講了那麼多,終於可以稍稍的正式進入另一個階段,沒錯,要開始寫判斷式了 這次先從最簡單的判斷式開始,if else 開始- Go 首先,之前有寫有一個簡單的互動式 用戶輸入 的代碼,忘記了嗎 ...

  7. 【转载】知乎答案----孙志岗----Google 发布了程序员养成指南,国内互联网巨头是否也有类似的指南和课程推荐

    国内公司在复制国外商业模式的同时,也应复制人家的社会担当.所以,来答题了!就参考 Google 的框架,列一下中文的课程.大体上在线学完一个计算机专业,是基本不成问题的.但是,这不意味着你可以不上大学 ...

  8. Linux为什么卡住了?

    导读 通过SSH登录Linux服务器时,输完用户名就卡住了,要等待10秒钟才提示密码输入.这究竟是什么原因导致的呢? 10秒钟的时间并不算长,吃个薯片喝口咖啡就过去了.但是作为强迫症患者,我还是容不得 ...

  9. popwindow设置背景半透明

    WindowManager.LayoutParams lp = getWindow().getAttributes(); lp.alpha = 0.5f; //0.0-1.0 getWindow(). ...

  10. Codeforces Round #156 (Div. 2)

    A. Greg's Workout 模3求和,算最大值. B. Code Parsing 最后左半部分为x,右半部分为y,那么从中间不断去掉xy,直到其中一种全部消去. C. Almost Arith ...