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. 服务器空间不足导致mysql服务器无法运行

    今天有朋友请我帮忙解决一个问题,他公司服务器mysql数据库一直连接失败.登录服务期之后发现服务器空间占满了,导致mysql不能启动. 下面说解决方法: 首先查看空间占用,发现空间占满了 df -h ...

  2. 模块导入应用settings的字符串

    看django源码,感觉他的settings好高大上然后自己试试 以上是文件目录 email.py中代码 class Email: def send(self): print('发送email') M ...

  3. django之单表查询

    一.创建表 1.创建模型: 创建名为book的app,在book下的models.py中创建模型: from django.db import models # Create your models ...

  4. vuls安装记录

    第一步安装go环境apt-get install golang-go(显示出错,go版本apt安装太低,apt-get purge golang-go卸载后手动安装,必须1.8.3以上) 还需将/us ...

  5. Qt之pro文件解析

    在我们创建Qt工程项目时,Qt Creator总会创建一个.pro文件,我们称.pro文件为Qt的工程管理文件.一个工程项目可以包含一个或多个.pro文件.理解和掌握pro文件的用法,将有利于Qt开发 ...

  6. 8.Mongodb备份与恢复

    1.备份 语法 mongodump -h dbhost -d dbname -o dbdirectory -h:服务器地址,也可以指定端口号 -d:需要备份的数据库名称 -o:备份的数据存放位置,此目 ...

  7. elasticsearch-mathc和term的区分

    elasticsearch和mysql在思想上是有不同的,elasticsearch有分词一说,比如北京奥运分词成北京,奥运,北京奥运.分词要要考虑两点,一个是查询字符串要不要分词,还有就是原存储字段 ...

  8. (原)MongoDB在系统中的使用

    序)Nosql并不是要取代原有的数据产品,而是为不同的应用场景提供更多的选择. 一)结构类型 传统数据库的领域在于结构化文档,对于非结构化文档和半结构化文档,它能处理,但是有一定的缺陷,那么什么又是结 ...

  9. 一款代码高亮插件 -- SyntaxHighlighter

    SyntaxHighlighter 是当前用得最多的一款代码高亮插件,包括本博客也用到了该插件来显示代码,大家可以看到效果了.只不过这是针对WordPress的一款代码高亮插件,而今天我要给大家介绍的 ...

  10. 问题 D: 约数的个数

    问题 D: 约数的个数 时间限制: 1 Sec  内存限制: 32 MB提交: 272  解决: 90[提交][状态][讨论版][命题人:外部导入] 题目描述 输入n个整数,依次输出每个数的约数的个数 ...