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. 廖老师的Python教程——Python简介

    一直想了解下Python,今儿在外面办事排队的时候,打开了廖老师的官网,找到了Python教程.虽然只是一篇关于Python的简介,但是通过将Python的特性与C进行对比,很生动地归纳了Python ...

  2. u-boot-2016.01移植(一)

    1.了解uboot: 阅读uboot源码顶层目录下的README.TXT可以提取如下信息:     made to support booting of Linux images.   //引导内核程 ...

  3. jenkins邮件发送jmeter接口测试报告

    在Jenkins中配置实现邮件通知,Jenkins提供了两种方式的配置. 一种是Jenkins内置默认的邮件通知,但是它本身有很多局限性,比如它的邮件通知无法提供详细的邮件内容.无法定义发送邮件的格式 ...

  4. HyperLedger Fabric 1.4 关键技术(6.4)

    本节介绍从最底层的账本开始,逐一讲解账本的结构和存储.智能合约的编写和部署.通道的操作.节点的背书和提交.排序的共识和客户端SDK的接口调用,与交易流程顺序相反,由里及表的说明Fabric最关键的技术 ...

  5. Android面试收集录 Android组件

    1.请说出Android SDK支持哪些方式显示富文本信息? 使用TextView组件可以显示富文本信息,如果要实现图文混排,需实现ImageGetter接口 使用WebView组件显示HTML页面 ...

  6. FPGA的嵌入式乘法器

    1. FPGA主要应用在并行处理资源的应用,视频与图像处理,无线通信的中频调制解调器. 嵌入式乘法器可以配置成一个 18 × 18 乘法器,或者配置成两个 9 × 9 乘法器.对于那些大于18 × 1 ...

  7. java 判断上午/下午

    //结果为“0”是上午 结果为“1”是下午 public class GregorianTest { public static void main(String args[]) { Gregoria ...

  8. Selenium搭配TestNG

    用Maven来构建TestNG依赖: <dependency> <groupId>org.testng</groupId> <artifactId>te ...

  9. 如何用Fiddler 拦住RestAssured发出的请求

    用RestAssured 发出的请求并不能直接被fiddler 拦截,可以在初始化的时候做出如下配置: RestAssured.proxy("localhost", 8888); ...

  10. 给移动硬盘安装rhel7

    本机是win8.1的系统,但不想给电脑装双系统,所以想给移动硬盘里安装rhel7移动硬盘是750G的在网上搜了很多方法,我采取了两个方法:方法一.1.取一个U盘,用软碟通把rhel7的iso文件写进了 ...