直接说解决方法:

假设一张拼合好的大图大小是: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. 转:Android随笔之——使用Root权限实现后台模拟全局按键、触屏事件方法(类似按键精灵)

    本文转载自CSDN的jzj1993,原文连接:http://blog.csdn.net/jzj1993/article/details/39158865 有时我们需要使用安卓实现在后台模拟系统按键,比 ...

  2. 构建自己的PHP框架--创建组件的机制

    在之前的博客中,我们完成了基本的Model类,但是大家应该还记得,我们创建数据库的pdo实例时,是hard好的配置,并且直接hard在Model类中. 代码如下: public static func ...

  3. 韩国"被申遗" (转自果壳)

    "被申遗"不是指"没申遗",而是全都经过了中国人重新包装. 近日,有报道称韩国计划将火炕申报世界遗产,联系近年来韩国多起"申遗事件",国内网 ...

  4. aud$定位错误用户密码登陆数据库的具体信息

    环境:Oracle 11.2.0.3 客户端使用错误的用户密码登陆数据库 查询最近1天由于密码错误登陆失败的信息 查询当前审计中有哪些returncode值 1. 客户端使用错误的用户密码登陆数据库 ...

  5. 【JVM】JVM系列之内存模型(六)

    一.前言 经过前面的学习,我们终于进入了虚拟机最后一部分的学习,内存模型.理解内存模型对我们理解虚拟机.正确使用多线程编程提供很大帮助.下面开始正式学习. 二.Java并发基础 在并发编程中存在两个关 ...

  6. Yahoo军规

    一.尽可能的减少HTTP请求 每一个图片,文字,js文件,css文件都是一个请求. 可以通过合并来请求来减少HTTP请求 比如:图片为一个请求,js文件为一个请求,css为一个请求 二.使用CDN C ...

  7. cssRules在不同浏览器中的兼容性

    在一份HTML文档中可以用三种方式添加样式信息: 1.通过<link>元素引用外部样式表: 2.通过<style>元素在文档的头部添加样式信息: 3.在具体的文档元素上通过st ...

  8. Linux process vs thread

    Linux process vs thread Question I have a query related to the implementation of threads in Linux. L ...

  9. Linux iptables原理--数据包流向

    Iptable与Netfilter 在上一篇文章 linux iptables常用命令--配置一个生产环境的iptables 我们知道iptables有好几个表,如raw,mangle,nat,fil ...

  10. CSS3+jQuery实现时钟插件

    查看效果:http://hovertree.com/texiao/hoverclock/demo4.htm 本插件使用方便,可以在博客园的页面中使用,请看本页面右侧:http://www.cnblog ...