摘要：我们都知道属性用来指定背景图片应该出现的位置，可以使用关键字绝对值和相对值进行指定。使用相对值时，定位方式直观上不好理解。但应清楚，最基本的方法是根据绝对值定位。上图经过计算，背景图片左上角被定位在处，故背景图片被切除一半。
我们都知道background-position属性用来指定背景图片应该出现的位置，可以使用关键字、绝对值和相对值进行指定。在CSS Sprites中，这个属性使用比较频繁，使用过程中，我常混淆，经常切不到自己想要的效果，于是决定好好理解其工作机制，这篇文章就是介绍background-position属性是如何指定背景图片和背景区域的位置关系。
注意：segmentfault对CodePen嵌入支持度不是很好，为使文章整洁，我将嵌入代码全部删除，完整体验请猛戳此处！
background-position我使用ps制作了一张400px × 400px的图片作为背景图片。
此处应有代码，猛戳此处！
为了更好理解background-position属性定位的机制，我们可以将指定背景区域想象为一个平面直角坐标系，原点在左上角，x轴正方向从左到右，y轴正方向从上到下，这点和平常向上为y轴正方向的坐标系有所不同。在这个坐标系中，通过指定x、y的坐标值定位一个点，此点即是背景图片的左上角。
此处应有代码，猛戳此处！
如上图所示，background-position指定值200px和300px，即x为200px，y为300px，此点所在位置就是背景图片的左上角，因为部分背景图片因溢出背景区域被裁剪，就只剩下200px × 100px的左上角部分。
此处应有代码，猛戳此处！
可以指定正值就当然可以指定负值，如上所示，此时左上角被定位在(0px, -300px)处，因为向上为y轴负方向，背景图片上半的300px就因溢出被切除了，只留下400px × 100px的下部分。
此处应有代码，猛戳此处！
除了使用绝对值，也可以使用相对值指定。使用相对值时，定位方式直观上不好理解。但应清楚，最基本的方法是根据绝对值定位。使用相对值时它会将其转换，最终还是根据绝对值指定背景图片的左上角，转化的依据是x = (容器的宽度-图片的宽度) * percentX;y = (容器的高度-图片的高度) * percentY。上图经过计算，背景图片左上角被定位在(-200px, 0px)处，故背景图片被切除一半。
此处应有代码，猛戳此处！
我们也可以通过关键字top、bottom、left、right和center指定background-position属性，大家应该都喜欢这种简单明了的方式吧。一般指定两个关键字，如果只有一个，则另一个默认是center。这种方式也最终将转化成绝对值定位，不过先会转换成百分比，top、bottom、left、right和center分别相当于0%、100%、0%、100%和50%。上图中的background-position: right bottom;和background-position: 100% 100%;效果是一模一样的。
CSS Sprites使用上面介绍的理解方式，相信还是很好理解background-position的定位原理的。我想，background-position多数使用场景应该就是CSS Sprites了。CSS Sprites是一种网页图片应用处理方式，将一个页面涉及到的零星图片都包含到一张大图中去。这样一来，当访问该页面时，客户端只需要向服务器请求少量的图片，图片越多请求次数越少，造成延迟的可能性也就越小，能有效减轻服务器的压力；接下来应用CSS属性的background-image、background-position的组合进行背景定位，用数字精确地定位出背景图片的位置。
参考资料CSS背景:css background属性全解析
background-position
CSS Sprites
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116870.html
摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。 前言 好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。 网上有很多前端的学习路径文章，大多是知...
摘要：原文地址本篇文章是笔者的设计指南学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对设计指南进行一些总结，没有看之前第一部分的话也可以从这里传送过去。 原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是笔者的 《CSS 设计指南》 学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对 ...
摘要：子选择器只对直接后代有影响的选择器，而对孙子后代以及多层后代不产生作用。烂透了尽可能使用复合语法糟糕好的避免不必要的重复糟糕好的组织好的代码格式代码的易读性和易维护性成正比。 标签与元素 标签和p元素有什么区别呢？大多数时候他们表示的是同一样东西，但仍有细微的区别。、等指的是HTML分隔符，而元素则是由一对开始结束标签构成的，用来包含某一些内容 子选择器和后代选择器的区别： 后代选择器...
摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。 迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...
摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一 任务四、 一个最常见的移动端页面 完成的事情 完成简单布局，然后填充界面 与效果图对比优化 完成验收要求：header扩展性 & 顶栏固定 进行p...
阅读 3890·2021-10-12 10:12
阅读 2865·2021-09-10 11:18
阅读 3653·2019-08-30 15:54
阅读 2747·2019-08-30 15:53
阅读 617·2019-08-30 13:54
阅读 950·2019-08-30 13:21
阅读 2234·2019-08-30 12:57
阅读 1670·2019-08-30 11:10
