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

一、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. 金融量化ushare模块

    一.介绍 Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工 到 数据存储的过程,能够为金融分析人员提供快速.整洁.和多样的便于分析的数据,为他们 ...

  2. SpringBean 定义继承

    Bean定义继承 bean定义可以包含很多的配置信息,包括构造函数的参数,属性值,容器的具体信息例如初始化方法,静态工厂方法名,等等.子bean的定义继承副定义的配置数据.子定义可以根据需要重写一些值 ...

  3. 深入浅出java IO模型

    一.同步和异步 同步:一个事件或者任务的执行,会使整个流程暂时等待,也就是说如果有多个任务要执行,必须要逐个进行. 异步:一个事件或者任务的执行,不会使整个流程暂时等待,也就是说如果有多个任务要执行, ...

  4. 001-window下运行linux

    一.概述 前提:有条件的情况下,自行安装 在windows上模拟linux环境,主要有三种方法: 1.VMware等虚拟机,缺点:占用系统资源多,运行速度慢. 2.Cygwin等模拟环境,用windo ...

  5. spring MVC学习（一）---前端控制器

    1.spring MVC中的前段控制器就是DsipatcherServlet,它在spring MVC框架中的结构图如下: 2.DispatcherServlet其实就是一个Servlet,它继承了H ...

  6. 22.解决 eclipse 与 AS 共用 SDK 导致 eclipse ADT 无法使用的问题

    相信很多同学在从eclipse 转 AS 都会遇到这个问题,因为方便所以共用了一个sdk 目录,但是AS 会主动更新sdk,然而手贱的跟新了一夜,再打开eclipse的时候瞬间呆滞了,这一夜发生什么了 ...

  7. redis_cluster部署过程

    Redis集群1.多个redis节点网络互联,数据共享2.所有的节点都是一主一从(可以是多个从),其中从不提供服务3.不支持同时处理多个键(如mset/mget),因为redis需要把键均匀分布在各个 ...

  8. FTP服务器文件上传的代码实现

    方式一: @Test public void testFtpClient() throws Exception { // 1.创建一个FtpClient对象 FTPClient ftpClient = ...

  9. XDU 1022 (数论筛法+前缀和)

    解法一:数论筛法+前缀和 //其实题目中f[n]的值可理解为存在多少个整数对使a*b<=n #include<cstdio> #define N 1007 #define maxn ...

  10. 4. Median of Two Sorted Arrays(2个有序数组的中位数)

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...