注:图片名称(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. JQuery特效分享网站

    各种jquery特效分享,可以去上面找资源. http://www.jqshare.com/

  2. BeanUtil体会

    把字符串(非纯数字组成的字符串,带有字符的那种)拷贝到int属性中,int属性值设为0 把字符串(纯数字组成的),赋值给double类型,可以直接转换,int类型也可以直接转换成double类型 但是 ...

  3. DOM优化

    一:DOM与浏览器: 重排:改变页面的内容. 重绘:浏览器显示的内容. 添加顺序:尽量在appendchild之前. 合并DOM操作-利用csstext, 缓存布局信息 文档碎片. 二 DOM 与事件 ...

  4. SQL取行最大值

    create table T(A decimal(10,1), B decimal(10,1), C decimal(10,1), D decimal(10,1), E decimal(10,1)) ...

  5. filter_input() 函数

    定义和用法 filter_input() 函数从脚本外部获取输入,并进行过滤. 本函数用于对来自非安全来源的变量进行验证,比如用户的输入. 本函数可从各种来源获取输入: INPUT_GET INPUT ...

  6. 12-8 php基础

    <?php //单行注释/* 多行注释*/ //弱类型语言//var a = 10;/*$a=10;$b = "hello";var_dump($a);$a="wo ...

  7. Android 学习第10课,Android的布局

    Android的布局 线性布局

  8. day14_API第四天

    1.正则(了解) 1.基本的正则表达式(看懂即可) 字符类[abc] a.b 或 c(简单类)[^abc] 任何字符,除了 a.b 或 c(否定)[a-zA-Z] a 到 z 或 A 到 Z,两头的字 ...

  9. 关于EEG参考电极

    今天搞ADS1299,里面的BIAS偏置运放原来是设置参考电极的. The input multiplexer has EEG-specific functions for the bias driv ...

  10. Python 利用pytesser模块识别图像文字

    使用的是python的pytesser模块,原先想做的是图片中文识别,搞了一段时间了,在中文的识别上还是有很多问题,这里做记录分享. pytesser,OCR in Python using the ...