雪碧图background-position的rem用法
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用法的更多相关文章
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...
- position:absolute 按钮左右分布:left:0 和 right:0 以及雪碧图
问题:把两个a标签按钮 垂直居中,并且分别把两个按钮放在水平左右两边顶部1,祖父元素设定:position:relative2,把.arrow 设定上下垂直居中 position:absolute; ...
- compass框架的sprite雪碧图的用法简要
---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样 ...
- compass做雪碧图
由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...
- 深入浅出CSS(二):关于雪碧图、background-position与steps函数的三角恋情
[测试代码] HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- css 雪碧图 及jquery定位代码
无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(spr ...
- CSS Sprite雪碧图
为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...
- Sprite(雪碧图)的应用
雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上. 使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的 ...
随机推荐
- Ubuntu 16.04 swoole扩展安装注意!!!
前言:目前很多项目估计常常会用到swoole扩展,如个人使用Ubuntu虚拟机安装扩展,这里总结一下遇到的问题: 一.先保证服务器时间同步当前地区时间,如北京时间: 1.设定时区 如:设定时区:dpk ...
- C语言实现二分查找
二分查找优势:比顺序查找更有效率 特点:元素按顺序排列 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include ...
- python2.7入门---文件I/O&简单用户交互
这篇文章开始之前,我们先来看下python中的输出方法.最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你传递的表达式转换成一个字符串表达式,并将结果写 ...
- spfa专题
SPFA专题 1通往奥格瑞玛的道路 在艾泽拉斯,有n个城市.编号为1,2,3,...,n. 城市之间有m条双向的公路,连接着两个城市,从某个城市到另一个城市,会遭到联盟的攻击,进而损失一定的血量. 每 ...
- java性能测试工具 jprofiler
1.下载地址 官方网址:http://www.ej-technologies.com/products/jprofiler/overview.html 2.Eclipse集成 该文(http://ji ...
- cloudera manager服务迁移(scm数据库在postgresql上,其他amon,rman,oozie,metastore等在mysql上)
公司线上大数据集群,之前用的是公有云主机,现在换成了自己idc机房机器,需要服务迁移,已下为测试: 1.备份原postgresql数据库: pg_dump -U scm scm > scm.sq ...
- Python全栈面试题
Mr.Seven 博客园 首页 新随笔 联系 订阅 管理 随笔-132 文章-153 评论-516 不吹不擂,你想要的Python面试都在这里了[315+道题] 写在前面 近日恰逢学生毕 ...
- NodeJS微信公众平台开发
微信是手机用户必备的App,微信最开始只是作为社交通讯应用供用户使用,但随着用户量不断的增加,微信的公众号在微信上表现出来了它强大的一面,微信公众平台具有四大优势:1.平台更加稳固:2.用户关系更加平 ...
- 【个人训练】(UVa146)ID Codes
题意与解析 这题其实特别简单,求给定排列的后继.使用stl(next_permutation)可以方便地解决这个问题.但是,想要自己动手解就是另外一回事了.我的解法是从后往前找到第一个$a_i$比$a ...
- Vm Ubuntu 文件共享问题
其实也是差不多的,就是需要重新安装一次工具 ,自己安装有问题,自己在手动安装一次就好了 下面是一个我的参考文章 http://blog.csdn.net/zz962/article/details/7 ...