background-position为什么会出现负值?
上篇文章讲到了雪碧图,其中小机器人抖腿的动作设置了图片的background-position:-640px 循环到-1200px,那么这个数值是如何得出来的?下面具体分析一下如何计算background-position的数值。
分析素材
下面这张雪碧图是今天的分析素材,尺寸为273*71,单位是px:
概念
background-position:设置背景图像的起始位置。
实验分析
html代码:设置一个box用于显示图片。
<div class="box"></div>
css属性设置:
.box{
margin-top: 50px;
margin-left: 50px;
width: 500px; /*box的宽度 远大于雪碧图宽度*/
height: 71px; /*box的高度 和雪碧图高度一致*/
background-image: url(../img/jingling.png); /*将雪碧图置为背景*/
background-repeat: no-repeat; /*设置背景不重复*/
background-color: #aaa;
background-position: 0px 0px; /*设置背景图起始位置为0px 0px */
}
此时界面显示如下:这说明,当 background-position坐标设置为0 0,雪碧图起始位置是和box起始位置重合的。
接着设置属性,图片显示如下:
background-position: -91px 0px;
我们发现,box起始位置变成了雪碧图的第二张开始。此时再回过头来看看background-position概念:设置背景图像起始位置。把box想象成一个向下向右为正的坐标系,并且box位置保持不动。那么 -91px是该雪碧图在X轴起始位置,可以看到雪碧图的第一帧已经超出box的正坐标系了,所以它看不见了。始终记住一个概念,background-position设置的是雪碧图相对于盒子的起始位置。
由此分析一下上一篇的雪碧图位置设置:
- 机器人雪碧图总共1280*80px,也就是一帧是80*80px。
- 小机器人的抖腿动作在easy-in进场动画结束之后,此时雪碧图停在最后一帧图上面,也就是有15帧图在坐标系左边,是看不见的。
- 注意此时要开始机器人抖腿动画,也就是从雪碧图的第9张到第16张执行帧动画。
- 要把第九帧图显示在坐标系 (0,0)位置,那么雪碧图X轴的起始位置就应该是 -640px,要把第16帧显示在(0,0)位置,那么雪碧图的起始位置就应该是-1200px(保留最后一帧在x轴右边,否则就看不见了)。
坐标值如图所示:
结论
始终记住一个概念,background-position设置的是雪碧图相对于盒子的起始位置。
至此,你明白background-position为什么设置为负值了么?
background-position为什么会出现负值?的更多相关文章
- html5+css3中的background: -moz-linear-gradient 用法
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...
- html5+css3中的background: -moz-linear-gradient 用法 (转载)
转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- css3中的渐变小总结
= 导航 顶部 线性渐变 径向渐变 透明度 边框 阴影 顶部 线性渐变 径向渐变 透明度 边框 阴影 系列教程 CSS3 Gradient分为linear-gradient(线性渐变)和r ...
- CSS3 Gradient 渐变
转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...
- jQuery视差滚动插件,(附原理分析,调用方法)
演示地址:http://www.jq22.com/jquery-info1799 jquery插件,使用验证过可用. 分析源代码后总结原理:设置background样式为fixed,判断浏览器滚动距离 ...
- CSS3 Gradient
CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...
- css切背景图片(background-position)
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
- CSS 笔记一(Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width)
Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...
- CSS3 线性渐变(linear-gradient) 兼容IE8,IE9
一.线性渐变在 Mozilla 下的应用 语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...
随机推荐
- PHP和javascript中url编码解码详解
在实际开发中,我们可能会遇到路径编码解码的问题,下面总结了一下: PHP中: 1.urlencode(编码),urldecode(解码) $a = urlencode('http://www.baid ...
- leetcode-40-组合总和 II
题目描述: 给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只 ...
- python模块之 fabric
Python模块之Fabric Fabric简介 Fabric是一个Python库,可以通过SSH在多个host上批量执行任务.你可以编写任务脚本,然后通过Fabric在本地就可以使用SSH在大量 ...
- 皕杰报表 javax.naming.NameNotFoundException: Name jdbc is not bound in this Context
今天做报表的时候,跳转到显示报表页面的时候不出来数据,报错说数据集未产生. 后台报错 javax.naming.NameNotFoundException: Name jdbc is not boun ...
- Windows开发经验 - WinDbg
1. 远程调试 参考文章:https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/remode-debugging-usi ...
- HLS:跑马灯实验
跑马灯实验的第一部分记录: 1. vivado 2018.2的HLS在跑C/RTL co-simulation的时候,一直报错,不论是用modelsim 还是vivado自带的similator.使用 ...
- 六、python中context.get()方法
例:context.get('variant',False) 意思是如果context中不包括variant 就返回False.
- (转)Linux下同步工具inotify+rsync使用详解
原文:https://segmentfault.com/a/1190000002427568 1. rsync 1.1 什么是rsync rsync是一个远程数据同步工具,可通过LAN/WAN快速同步 ...
- Chrome DevTools的15个使用技巧(译)
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须掌握的工具.大多数前端开发者可能熟悉关于chorme的许多特 ...
- WPF中Popup等弹窗的位置不对(偏左或者偏右)
1.情况如图: 正常情况: 部分特殊情况: 在一般的电脑都能正确显示,就是第一种情况,同样的代码为什么在不同的电脑就会显示不同的位置呢,原来Windows为了满足 不同需求的用户,左撇 ...