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

一、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. HttpRunner 参数化数据驱动

    HttpRunner 2.0 参数化数据驱动案例,废话不说,直接上干货. 1.测试用例目录结构      api:接口集 testcases:测试用例    testsuites:测试套件 data: ...

  2. js-jquery-003-条形码-二维码【QR码】

    一.基本使用 插件地址:https://github.com/jeromeetienne/jquery-qrcode 1.首先在页面中加入jquery库文件和qrcode插件. <script ...

  3. ui-select : There is no "X"(delete button) with selectize theme, when allow-clear="true"

    but add allow-clear="true"For Bootstrap and Select2 themes, it's working perfectly. reason ...

  4. 实时流计算Spark Streaming原理介绍

    1.Spark Streaming简介 1.1 概述 Spark Streaming 是Spark核心API的一个扩展,可以实现高吞吐量的.具备容错机制的实时流数据的处理.支持从多种数据源获取数据,包 ...

  5. PAT 1125 Chain the Ropes[一般]

    1125 Chain the Ropes (25 分) Given some segments of rope, you are supposed to chain them into one rop ...

  6. DecisionTree

    1.信息增益的定义,也就是互信息 2.信息增益的推导 由公式即可得到信息增益 信息增益存在偏向于选择取值较多的特征的问题,信息增益比可以对这一问题进行修正 3.信息增益比 4.基尼指数,基尼指数越大, ...

  7. 内存检查工具Valgrind

    官网介绍:http://www.valgrind.org/ Valgrind is an instrumentation framework for building dynamic analysis ...

  8. CCF 交通规划(Dijkstra+优先队列)

    交通规划 问题描述 G国国王来中国参观后,被中国的高速铁路深深的震撼,决定为自己的国家也建设一个高速铁路系统. 建设高速铁路投入非常大,为了节约建设成本,G国国王决定不新建铁路,而是将已有的铁路改造成 ...

  9. IDEA创建Spring Boot的项目

    IDEA创建SpringBoot的项目非常的方便智能,可以实现零配置,只需要在创建的时候勾选你需要的功能,比如mybatis,mysql等等,它会帮你自动下载导入响应的jar,不用自己再去手动填写. ...

  10. cocos2d-x 3.3 引用【#include "cocos-ext.h"】头文件出现编译错误

    添加[#include "cocos-ext.h"] 头文件后报错 f:\projects\test_httpclient\cocos2d\extensions\gui\cccon ...