直接说解决方法:

假设一张拼合好的大图大小是:900 x 1000 px (如上图)

现在想取图中左上角的河马图标,并缩小图标的大小。

正常取图:

.sprite {
background: url('imgs/woqu_localjoin_all.png') no-repeat -21px -80px;
width: 190px;
height: 154px;
}

现在取正常图标大小的一半:

<pre name="code" class="html">.sprite {
background: url('all.png') no-repeat -10px -40px;
width: 95px;
height: 74px;
background-size:450px 500px;
}

OK,大功告成!

最后推荐大家一款css sprite测量工具:http://www.spritecow.com/

打开,把拼合好的png图拖进去:

css sprite 调整大张图片中小图标的大小的更多相关文章

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

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

  2. CSS Sprite、CSS雪碧图应用实例

    CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...

  3. 关于input输入框内设置小图标的问题

    其实很简单,只需要html和css就可以搞定啦 首先:<input class="layui-input" id="test1" placeholder= ...

  4. 【CSS学习笔记】初始化CSS后,写li,并利用背景图片,来完成li小图标的效果,且达到个浏览器兼容

    第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复, ...

  5. GWT 中实现“CSS Sprite”

    近段时间在弄GWT这一块,开发中遇到的一些不错的方法或者技巧,在此做个分享和记录,有不同见解可发表意见  互相切磋. 在web开发中,必然涉及到网页中的图片,本地浏览网页,要下载在服务器端的图片,然后 ...

  6. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  7. background-size之CSS Sprite巧用

    前言 background-size:规定背景图片的尺寸.为CSS3属性.so...万恶的ie浏览器,此刻的内心一定是崩溃的!说实话,作为一个前端的coder,面对CSS3如此多的炫酷效果,我不能用起 ...

  8. CSS Sprite笔记

    1. 什么是CSS Sprite 将一些碎小的图片拼接为一张大点的图片来使用,目的是为了减少浏览器的http请求次数以提高网页的加载速度.每次请求图片都需要跟服务器建立一次连接,并且浏览器的最大并发请 ...

  9. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

随机推荐

  1. publishing failed with multiple errors resource is out of sync with the file system--转

    原文地址:http://blog.csdn.net/feng1603/article/details/7398266 今天用eclipse部署项目遇到"publishing failed w ...

  2. JS Div滚动,下拉框添加属性,年月日下拉条

    创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...

  3. 【JUC】JDK1.8源码分析之CopyOnWriteArrayList(六)

    一.前言 由于Deque与Queue有很大的相似性,Deque为双端队列,队列头部和尾部都可以进行入队列和出队列的操作,所以不再介绍Deque,感兴趣的读者可以自行阅读源码,相信偶了Queue源码的分 ...

  4. 【原创】轻量级移动设备即时通讯技术MobileIMSDK的常见问题解答

    申明:MobileIMSDK 目前为个人原创开源工程且已发布,现整理了一些有关MobileIMSDK的常见的问题,希望对需要的人有用,谢谢.如需与作者交流,见文章底部个人签名处,互相学习. Mobil ...

  5. 初来乍到 Java 和 .Net 迭代器功能

    最近有一个需求是这样的, 根据键值对存储类型数据,也算是数据缓存块模块功能设计. 一个键对应多个值.每一个键的值类型相同,但是每个不同的键之间类型不一定相同. Java 设计如下 HashMap< ...

  6. [Asp.net 5] Logging-新日志系统目录

    楼主有个美好的愿望——把asp.net 5所有能看懂的代码一一呈现给大家(比如C++,楼主就看不懂).现在已经做完了依赖注入.多语言.配置文件三部分,比较基础的日志就成为了楼主的下一个目标.下面是楼主 ...

  7. C#播放MP3源代码

    代码如下: using System; using System.Runtime.InteropServices; using System.Text; using System.IO ; using ...

  8. 客户端调用 WCF 的几种方式

    转载网络代码.版权归原作者所有..... 客户端调用WCF的几种常用的方式: 1普通调用 var factory = new DataContent.ServiceReference1.Custome ...

  9. iis配置出现处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”问题

    最近重新由于一些问题要安装vs2015和oracle所以就重装了电脑,吧项目发布到本地的iis上的时候出现问题了, 像之前出现的问题一般都是重装电脑后,安装vs的时候,是先安装了vs,之后再Windo ...

  10. 【C#进阶系列】25 线程基础

    线程的概念 线程的职责是对CPU进行虚拟化. CPU为每个进程都提供了该进程专用的线程(功能相当于cpu),应用程序如果进入死循环,那么所处的进程会"冻结",但其他进程不会冻结,它 ...