background的雪碧图配合rem就正常写即可,要加上background-size,大小为sprites的原图尺寸,宽高为一帧的尺寸。
例如:

.player{
width: 2.32rem; /*一帧图的大小*/
height: 2.8133rem;
display: inline-block;
position: absolute;
left: 50%;
margin-left: -1.16rem;
z-index:;
background:url('../images/activity_redrain_aug/player_sprites.png') no-repeat;
background-size: 7.76rem 6.24rem; /*此处写sprites的原图大小,不是一帧的大小*/
}
.player0 {
background-position: -0.1333rem -0.1333rem;
}
.player1{
background-position: -2.72rem -0.1333rem;
}
.player2{
background-position: -5.3067rem -0.1333rem;
}
.player3{
background-position: -0.1333rem -3.2133rem;
}

雪碧图background-position的rem用法的更多相关文章

  1. 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

    先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...

  2. position:absolute 按钮左右分布:left:0 和 right:0 以及雪碧图

    问题:把两个a标签按钮 垂直居中,并且分别把两个按钮放在水平左右两边顶部1,祖父元素设定:position:relative2,把.arrow 设定上下垂直居中 position:absolute; ...

  3. compass框架的sprite雪碧图的用法简要

    ---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样 ...

  4. compass做雪碧图

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

  5. 深入浅出CSS(二):关于雪碧图、background-position与steps函数的三角恋情

    [测试代码] HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

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

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

  7. css 雪碧图 及jquery定位代码

    无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(spr ...

  8. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  9. Sprite(雪碧图)的应用

    雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上. 使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的 ...

随机推荐

  1. Java实现文件的上传下载

    文件上传,下载的方法: 上传代码 /** * 文件上传.保存 * * @param mapping * @param form * @param request * @param response * ...

  2. ECSHOP快递单号查询插件圆通V8.2专版

    本ECSHOP快递物流单号跟踪插件提供国内外近2000家快递物流订单单号查询服务例如申通快递.顺丰快递.圆通快递.EMS快递.汇通快递.宅急送快递.德邦物流.百世快递.汇通快递.中通快递.天天快递等知 ...

  3. 12.2.1 访问元素的样式【JavaScript高级程序设计第三版】

    任何支持style 特性的HTML 元素在JavaScript 中都有一个对应的style 属性.这个style 对象是CSSStyleDeclaration 的实例,包含着通过HTML 的style ...

  4. 转译符,re模块,random模块

    一, 转译符 1.python 中的转译符 正则表达式中的内容在Python中就是字符串 ' \n ' : \ 转移符赋予了这个n一个特殊意义,表示一个换行符 ' \ \ n' :  \ \  表示取 ...

  5. java8lambda表达式初识

    一.函数式接口 只有一个 抽象方法 的 接口 叫函数式接口 /** * @auther hhh * @date 2018/12/24 22:20 * @description 函数式接口:只有 一个 ...

  6. 【转】Android开发之ListView+EditText-要命的焦点和软键盘问题解决办法

    Android开发之ListView+EditText-要命的焦点和软键盘问题解决办法 [原文链接] 这篇文章完美的解决了我几个月没结论的bug... 感谢热爱分享的技术达人~ 我是怎么走进这个大坑的 ...

  7. Altera Stratix IV 命名规则

    由于要开发基于DE4平台的应用,应该要了解一下该平台的芯片情况Stratix IV 具体型号为:Stratix IV EP4SGX230KF40C2 命名规范如下 官网资料为:https://www. ...

  8. 实用脚本 4 -- Makefile(不同文件下的多个可执行文件or静态库编译到同一目录下)

    不同文件下的多个可执行文件编译到同一目录下,这样方便观察编译结果,从而方便进程操作.使用时根据自己的需要在进行局部修改(如 链接库.目标文件等等). 1..bashrc 中设置编译主目录(例如) ex ...

  9. SSM框架学习思维导图

    SSM框架学习思维导图 2017年08月11日 20:17:28 阅读数:1141 放上前段时间学习SSM框架以及Spring.SpringMVC.MyBatis的学习结果,输出思维导图一共四幅图.这 ...

  10. Oracle 学习笔记(四)

    ​oracle表查询 使用逻辑操作符号  查询工资高于 500 或者是岗位为 MANAGER 的雇员,同时还要满足他们的姓名首字母为大写 J SELECT * FROM emp WHERE (sal ...