注:图片名称(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. javascript高级教程:如何优化javascript代码性能

    在web前端开发中,为实现一些动态效果,减小页面大小,我们一般都会使用JavaScript技术来进行相关设置.但是初学者在编写JavaScript代码的时候,往往都是比较低质的代码,那如何才能提高Ja ...

  2. SQL2008无法启动,报错"17051

    解决办法: 第一步:进入SQL2008配置工具中的安装中心, 第二步:再进入维护界面,选择版本升级, 第三步:进入产品密钥,输入密钥 Developer: PTTFM-X467G-P7RH2-3Q6C ...

  3. Win10/UWP新特性系列—电池报告

    UWP中,新增了当节电模式开启时,App能获取到通知的API,通过响应电源条件的更改,比如咨询用户是否使用黑色背景等来帮助延长电池使用时间. 通过Windows.Devices.Power命名空间中的 ...

  4. As 和 Is的区别

    首先来说说As是干什么的: 代码: void OnMouseEnter(object sender, MouseEventArgs e){ Ellipse ell = sender as Ellips ...

  5. Opencv结构与内容

    一.Opencv的结构分类: cxcore.cv.ML(Machine Learning).HighGUI.cvcam.cvaux 二.常见结构的内容与算法: 1.cxcore库(基本结构和算法.XM ...

  6. Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  7. 【C】 02 - 程序结构和预处理

    在正式进入C的语法之前,有必要对其整体外观和组成元素作一个浏览.这部分内容对大多数人是比较陌生的,但它们却是C的起点和骨架.而这些内容涉及的背景或细节又可以展开为专门的课题,这里也只是浅尝则止,说明个 ...

  8. Oracle常见的几种等待事件

    1. CPU time CPU time其实不是真正的等待事件.是衡量CPU是否瓶颈的一个重要指标.一般来讲,一个良好的系统,CPU TIME 应该排在TOP 5 TIME Event的最前面. 当然 ...

  9. SQL SERVER调用textcopy写文件

    SET @PATH = 'textcopy /S ' + @LServer + ' /U '+ @LUser + ' /P '+ @LPass + ' /D '+ @LDB + ' /T '+@tab ...

  10. [JBoss] - 在Jboss 7.1 AS中打印hibernate的SQL方法

    因为JBoss使用的是log4j,JBoss的系统日志级别默认是INFO.而Hibernate或IBatis要打印SQL,级别为DEBUG,所以,程序设置了log4j级别为DEBUG会被JBoss系统 ...