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

一、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. LInux下桥接模式详解三

    上篇文章介绍了Linux内核桥接模式涉及到的几个结构,本节就重点放在数据包的处理上! 本节所有代码参考LInux 3.10.1内核! 前面已经提到一个数据包从网卡流到Linux内核中的L2层,最终被交 ...

  2. Java设计模式-抽象工厂模式（Abstarct Factory）

    抽象工厂模式 举个生活中常见的例子,组装电脑,在组装电脑时,通常需要选择一系列的配件,比如CPU,硬盘,内存,主板,电源,机箱等,为了讨论使用简单,值考虑选择CPU和主板的问题. 事实上,在选择CPU ...

  3. python手写bp神经网络实现人脸性别识别1.0

    写在前面:本实验用到的图片均来自google图片,侵删! 实验介绍 用python手写一个简单bp神经网络,实现人脸的性别识别.由于本人的机器配置比较差,所以无法使用网上很红的人脸大数据数据集(如lf ...

  4. VS和IE或者360兼容模式简单调试js方法

    首先IE(8.0版本以上)将脚本调试去掉,如下图 之后在vs里面的js要调试的地方添加代码debugger ,如下图所示 当程序运行到debugger处时,就会提示要调试,选择vs版本即可 之后会出现 ...

  5. 一步一步学EF系列四【升级篇 实体与数据库的映射】

    之前的三张为基础篇,如果不考虑架构问题,做一般的小程序,以足够用了.基本的增删改查也都有了.但是作为学习显然是不够的.通过之前三章的学习,有没有发现这样写有什么问题,有没有觉得繁琐的?可能有人会说,之 ...

  6. java并发 —— Lock

    java并发 -- Lock 关于java并发中的锁知识,少不了 Lock.本文转载自:Java并发编程:Lock. 从Java 5之后,在java.util.concurrent.locks包下提供 ...

  7. 移动端web开发 尽量哪些标签 常用标签及注意事项

    H5手机移动端WEB开发资源整合 常用的标签及注意事项: https://blog.csdn.net/u012118993/article/details/56023399 移动前端不得不了解的htm ...

  8. HDU - 2732 Leapin' Lizards (拆点最大流)

    题意:有N*M的矩形,每个格点有一个柱子,每根柱子有高度c,允许蜥蜴经过这根柱子c次,开始有一些蜥蜴在某些柱子上,它们要跳出这个矩形,每步最大能跳d个单位,求最少有多少蜥蜴不能跳出这个矩形. 分析:转 ...

  9. Bar Mitzvah Attack分析

    结合RC4算法实现,简单分析一下Bar Mitzvah Attack攻击的原理,并以WEP破解过程来举例说明通用的破解方式.(个人觉得RC4早已经过时,要想避免该攻击,应该采用更好的加密算法,如:cc ...

  10. Oracle中用sql语句取随机数和整数

    --- 应用round(5.678,3)保留小数 应用floor(5.678)保留整数 应用dbms_random.value(30,50)取得随机数 --- dbms_random包 获得随机小数S ...