css sprite 调整大张图片中小图标的大小
直接说解决方法:
假设一张拼合好的大图大小是: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 调整大张图片中小图标的大小的更多相关文章
- css:自己实现一个带小图标的input输入框
有小图标的input输入框<input type="text" placeholder="输入手机号" style="background:ur ...
- CSS Sprite、CSS雪碧图应用实例
CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...
- 关于input输入框内设置小图标的问题
其实很简单,只需要html和css就可以搞定啦 首先:<input class="layui-input" id="test1" placeholder= ...
- 【CSS学习笔记】初始化CSS后,写li,并利用背景图片,来完成li小图标的效果,且达到个浏览器兼容
第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里. 在<li>中设置背景图片的尺寸,地址,不重复, ...
- GWT 中实现“CSS Sprite”
近段时间在弄GWT这一块,开发中遇到的一些不错的方法或者技巧,在此做个分享和记录,有不同见解可发表意见 互相切磋. 在web开发中,必然涉及到网页中的图片,本地浏览网页,要下载在服务器端的图片,然后 ...
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- background-size之CSS Sprite巧用
前言 background-size:规定背景图片的尺寸.为CSS3属性.so...万恶的ie浏览器,此刻的内心一定是崩溃的!说实话,作为一个前端的coder,面对CSS3如此多的炫酷效果,我不能用起 ...
- CSS Sprite笔记
1. 什么是CSS Sprite 将一些碎小的图片拼接为一张大点的图片来使用,目的是为了减少浏览器的http请求次数以提高网页的加载速度.每次请求图片都需要跟服务器建立一次连接,并且浏览器的最大并发请 ...
- css sprite 雪碧图
使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...
随机推荐
- iOS 如何自定义UISearchBar 中textField的高度
iOS 如何自定义UISearchBar 中textField的高度 只需设置下边的方法就可以 [_searchBar setSearchFieldBackgroundImage:[UIImage i ...
- jQuery中的Sizzle引擎分析
我分析的jQuery版本是1.8.3.Sizzle代码从3669行开始到5358行,将近2000行的代码,这个引擎的版本还是比较旧,最新的版本已经到v2.2.2了,代码已经超过2000行了.并且还有个 ...
- Oracle内存管理技术
1.Oracle内存管理技术 2.配置自动内存管理(AMM) 3.监视自动内存管理(AMM) 4.配置自动共享内存管理(ASMM) 5.配置自动PGA内存管理 Reference 1.Oracle内存 ...
- SQL SERVER四舍五入你除了用ROUND还有其他方法吗?
引言 今天和测试沟通一个百分比计算方式时遇到一个问题, 我在存储过程里用到了强转CAST(32.678 AS DECIMAL(5,1)) 我认为该方式只会保留一位小数,我给测试的回复是我并没有用到四 ...
- Sql Server 聚集索引扫描 Scan Direction的两种方式------FORWARD 和 BACKWARD
最近发现一个分页查询存储过程中的的一个SQL语句,当聚集索引列的排序方式不同的时候,效率差别达到数十倍,让我感到非常吃惊 由此引发出来分页查询的情况下对大表做Clustered Scan的时候, 不同 ...
- jQuery-1.9.1源码分析系列(六) 延时对象续——辅助函数jQuery.when
$.when的说明 描述: 提供一种方法来执行一个或多个对象的回调函数,返回这些对象的延时(Deferred)对象. 说明(结合实例和源码): 如果你不传递任何参数, jQuery.when()将返 ...
- 谈谈asp.net MVC中的AppendTrailingSlash以及LowercaseUrls ,你还记得吗?
asp.net MVC是一个具有极大扩展性的框架,可以在从Url请求开始直到最终的html的渲染之间进行扩展,所以要学好还是需要了解框架的运行原理,推荐Artech. 今天我们回忆的不是MVC中的fi ...
- 7.DataAnnotations(数据注解)【Code-First 系列】
EF Code-First提供了一系列的数据注解的特性,你可以将其应用到你的领域类和属性中,数据注解属性重写了EF默认的约定. System.ComponentModel.DataAnnotation ...
- C#基础-FileStream
一.FileStream的基础知识 属性: CanRead 判断当前流是否支持读取,返回bool值,True表示可以读取 CanWrite 判断当前流是否支持写入, ...
- .net winform的IsMdiContainer属性
.net winform的IsMdiContainer属性 获取或设置一个值,该值指示窗体是否为多文档界面 (MDI) 子窗体的容器. 当你想让某个窗体成为其他窗体的父窗体时,请先把窗体的IsMdiC ...