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. doc命令操作数据库(下)

    1.给数据表添加一组数据: 2.给数据表添加多组数据: 3.对数据进行删除和修改: 4.用select查询单个或多个数据信息: 5.去除重复值: 6.查询的各种用法: between的用法: 查询排序 ...

  2. MAC和windows开发操作系统环境,解决Maven工程中报 Missing artifact jdk.tools:jdk.tools

    同事使用的是苹果mac,而我们其他人的开发环境是windows jdk1.8 导致同事从git上pull下来的工程,pom文件是直接报错的, windows下的pom文件设置是这样的: <dep ...

  3. linux网络服务实验

    1.设置window IP地址为192.168.3.XX,掩码24位. 2.设置Linux IP地址为192.168.3.YY,掩码24位.window与Linux互相ping通. 3.在linux中 ...

  4. UVA11988 Broken Keyboard (a.k.a. Beiju Text)【数组模拟链表】

    参考:https://blog.csdn.net/lianai911/article/details/41831645 #include <iostream> #include <c ...

  5. VHDL入门学习-程序组成

    1. VHDL程序的组成 一个完整的VHDL程序是以下五部分组成的: 2. 库(LIBRARY):比较好理解,调用系统已有的库,WORK库就是用户当前编辑文件所在的文件夹, IEEE库:由IEEE(美 ...

  6. Go中的系统Signal处理

    package main import "fmt" import "os" import "os/signal" import " ...

  7. jmeter插件之VariablesFromCSV

    项目需求: 由于该项目的特殊性,需要新建很多个jmx脚本,并且这些jmx的全局用户变量都一样,如果要修改的话,没法做到统一修改. 实现思路: 为了满足需求,在jemter官网找到该插件Variable ...

  8. ExtJs4.1目录结构介绍和使用说明[转]

    一.在做ExtJs开发之前首先要到网站上下载ExtJs的开发包,我用的最新版本是4.1.1.此版本相对于之前的版本目录结构发生了一些变化,没有了adapter目录, 目录结构如下 文件/文件夹名的作用 ...

  9. Qt Qml 汽车仪表

    上一个原文连接http://blog.csdn.net/z609932088/article/details/53946245 参考资料连接:链接: https://pan.baidu.com/s/1 ...

  10. lua优化

    前言 Lua是一门以其性能著称的脚本语言,被广泛应用在很多方面,尤其是游戏.像<魔兽世界>的插件,手机游戏<大掌门><神曲><迷失之地>等都是用Lua来 ...