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

一、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. python 递归深度优先搜索与广度优先搜索算法模拟实现

    一.递归原理小案例分析 (1)# 概述 递归:即一个函数调用了自身,即实现了递归 凡是循环能做到的事,递归一般都能做到! (2)# 写递归的过程 1.写出临界条件2.找出这一次和上一次关系3.假设当前 ...

  2. request.getInputStream() 流只能读取一次问题

    问题: 一次开发过程中同事在 sptring interceptor 中获取 request body 中值,以对数据的校验和预处理等操作 .导致之后spring 在读取request body 值做 ...

  3. sdut3138: N!(计算n!中结尾零的个数）

    题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=3138 算法思想:在1-10两个数相乘要产 ...

  4. 等待事件对应的p1,p2,p3含义

    Oracle 10g v$session视图中不同等待事件对应的p1,p2,p3的含义也不同,我们不可能记住所有等待事件对应的p1,p2,p3的含义. 可以通过查询V$EVENT_NAME知道每个等待 ...

  5. mysql数据库从删库到跑路之select单表查询

    一 介绍 本节内容: 查询语法 关键字的执行优先级 简单查询 单条件查询:WHERE 分组查询:GROUP BY HAVING 查询排序:ORDER BY 限制查询的记录数:LIMIT 使用聚合函数查 ...

  6. 一次http请求中的信息

    什么是Http 一次http传输,是由请求报文和响应报文来完成的 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World W ...

  7. （译）Windows Azure:移动后端开发的主要更新

    Windows Azure:移动后端开发的主要更新 这周我们给Windows Azure释出了一些很棒的更新,让云上的移动应用开发明显的简单了.这 些新功能包括: 移动服务:定制API支持移动服务:G ...

  8. TortoiseSVN_1.9.1.267_x64版本控制系统（针对Visual SVN Server）使用简单介绍

    软件下载地址:TortoiseSVN(SVN客户端)64位 V1.9.1.267简体中文免费版 软件详细操作说明:TortoiseSVN使用说明书(超详细) 文章内容:此篇是简单记录如何从Visual ...

  9. ls命令输出的文件颜色

    ls的输出颜色不止3种,有以下几种,白色:表示普通文件蓝色:表示目录绿色:表示可执行文件红色:表示压缩文件浅蓝色:链接文件红色闪烁:表示链接的文件有问题 黄色:表示设备文件 灰色:表示其他文件 这是l ...

  10. qml源码查看

    已5.4为例说明: QtQuick源码查看: 地址:Qt\Qt5.4.1\5.4\Src\qtdeclarative\src\quick\items Qt control源码查看: 地址:\Qt\Qt ...