长时间不用把精灵图怎么用给忘了。。。

一、PC端

　　给所用到精灵图的元素设置background:url(sprites.png路径);  background-position: -x -y; 其中：-x，-y是该icon到图片左侧、上方的距离

二、移动端

　　1、同样设置元素的background:url(sprites.png路径);

　　2、设置：background-size:精灵图宽度/2  精灵图高度/2; 因此，在之后用到精灵图的地方就不用再刻意的强调background-size

sprites.png雪碧图的更多相关文章

  1. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  3. CSS Sprites ——雪碧图的使用方法

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  4. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  5. compass制作sprite雪碧图

    1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目 命令行:compass create myproject 3.在myp ...

  6. compass做雪碧图

    由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...

  7. 使用Compass制作雪碧图

    遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...

  8. gulp多张图片自动合成雪碧图

    相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项 ...

  9. 前端-如何用gulp快速搭建项目（sass预编译，代码压缩，css前缀，浏览器自动刷新，雪碧图合成）

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

随机推荐

  1. Shiro Annotation保护实例

    之前介绍了Shiro的Web訪问控制和缓存配置,事实上Shiro和Spring一样能够使用Annotation来配置方法级别的安全.省去自己每次获取Subject去做权限验证,比方在改动用户passw ...

  2. Apache Lucene初探

    讲解之前,先来分享一些资料 首先,学习任何一门新的亦或是旧的开源技术,百度其中一二是最简单的办法,先了解其中的大概,思想等等.这里就贡献一个讲解很到位的ppt 这是Lucene4.0的官网文档:htt ...

  3. MySQL8.0新特性

    一.修改密码修改root密码之前要先flush privileges;ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'f ...

  4. BigData Technique&&Application指南-笔记1

    1.数据的量级 传统企业数据量基本上在TB之上,大型互联网企业达到了PB以上. 2.大量不同的数据类型  结构化数据:是存储在数据库里,可以用二维表来逻辑表达数据.  半结构的非结构化数据:一般都是纯 ...

  5. Java栈之顺序栈存储结构实现

    一.栈的基本定义 栈是一种数据结构,它代表一种特殊的线性表,这种线性表只能在固定一端(通常认为是线性表的尾端)进行插入.删除操作的特殊线性表,通常就是在线性表的尾端进行插入.删除操作. 二.顺序栈的实 ...

  6. Portal系统中当切换学生时仍旧停留在当前页面的实现方法

    一.BaseController.cs文件 1.OnActionExecuting方法,该方法可以被各子Controller重写 protected override void OnActionExe ...

  7. 04 linux用户群组和权限

    作业一: 1)新建用户natasha,uid为1000,gid为555,备注信息为“master” 2)修改natasha用户的家目录为/Natasha 3)查看用户信息配置文件的最后一行 4)为na ...

  8. OpenStack的架构详解

    OpenStack既是一个社区,也是一个项目和一个开源软件,它提供了一个部署云的操作平台或工具集.其宗旨在于,帮助组织运行为虚拟计算或存储服务的云,为公有云.私有云,也为大云.小云提供可扩展的.灵活的 ...

  9. sgu 102 Coprimes 解题报告及测试数据

    102. Coprimes time limit per test: 0.25 sec. memory limit per test: 4096 KB 题解: 求一个1-10000之间的数 N 的互质 ...

  10. [Python]返回函数，装饰器拾遗

    def lazy_print(*args): def pr(): print(args) return pr 当我们调用lazy_print()时,返回的并不是求和结果,而是求和函数: >> ...