CSS background-position属性

一、坐标系及原点

就像CSS的position属性是定位元素一样，background-position属性定位的是背景图片的。他定位的的是由background-image属性定义的背景图片（注意，这里并不是定位由background-color定义的背景颜色）。

---

它的格式基础模型为：

background-position：xpos ypos;

其中xpos表示x轴（水平位置）方向的坐标，ypos表示y轴（垂直位置）方向的坐标。

---

学过数学的看官可能有疑问了，既然引出了坐标系，那么它的坐标原点在哪里？

---

问题的答案是：坐标原点的位置是由background-origin属性控制的。默认情况下，它的原点是拥有该背景图片元素的左上角的padding-box（内边距盒模型）区域。

---

那么坐标点呢，是背景图的那个部分呢？你猜猜………..

---

对就是背景的左上角的点。

图片来源于：http://www.w3cplus.com/css/a-primer-to-background-positioning-in-css.html](http://www.w3cplus.com/css/a-primer-to-background-positioning-in-css.html

坐标原点右侧xpos的值为正数，左侧为负数；下侧ypos的值为正数，上侧为负数。

---

二、属性值的类型

background-position属性的值分为三类。

第一类是绝对值类型的值，这里的绝对值并不是数学意义上的绝对值，而是有具体单位的值，比如px、em、rem、ch等单位。
比如：

background-position:50px 30px;background-position:-10px 20px;background-position:-10px 2em;

---

第二类是关键字类型的值。它们有表示水平方向的left、center、right；表示垂直方向的top、center、bottom。
比如：

background-position:top right;background-position:top center;background-position:center center;

这里剧透一下，这里的关键字top和left表示相应坐标方向的0%（下面要讲解的第三类值：百分比），center表示50%，bottom和right表示100%。

---

第三类是百分比类型的值。这里会有一个误解，就是你可能以为这里的百分比表示的是坐标点（背景左上角的点）相对于背景元素大小的百分比的位置

你眼中的百分比位置的表示方式

就像是好的故事总是给人意想不到的结局一样，这里的百分比并不是你意淫的上面的表示方式。

故事要从这里说起：W3C规范是这样说的

A percentage for the horizontal offset is relative to (width of
background positioning area - width of background image). A percentage
for the vertical offset is relative to (height of background
positioning area - height of background image), where the size of the
image is the size given by ‘background-size’

英文不好的我只能借鉴别人的翻译了：

水平百分比的值等于容器宽度（拥有此背景的元素）百分比值减去背景图片宽度百分比值。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。

（原文翻译及图片出处：http://www.w3cplus.com/css/background-position-with-percent.html）

上图中，经过我们人类可以理解的方式解释就是：背景图片相对于自身长度为的75%，宽度为50%的点，和背景容器相对于自身长度为的75%，宽度为50%的点重合。

---

那么这样的话，我们就可以知道：

• background-position:50% 50%;是把背景图片放到背景容器的正中央
• background-position:0% 0%;是把背景图片放到背景容器的左上角（两个左上角的点重合）
• background-position:100% 100%;是把背景图片放到背景容器的左下角（两个左下角的点重合）
• ……

---

三、其他

意犹未尽啊！鉴于狗仔一扒到底的精神，接下来我会继续爆料关于background-position这位明星的一些私人空间。下面是花边新闻：

• 默认的background-position的值是background-position:0% 0%;

• background-position属性可以只写一个值。

  比如，background-position:50px;

  那么50px表示水平方向的值，垂直方向的值默认为center。
  相当于

  background-position:50px center;
  或
  background-position:50px 50%;

• 上面介绍的background-position三种类型的值可以随意组合着写。

  比如:
  background-position：50px bottom;
background-position：50px 10em;
background-position：50px 10%;

• background-position属性的四值模式：可以用关键字top，bottom和left，right改变background-position的定位机制。

  比如：background-position:right 20px bottom 50px;

  表示背景图片距离背景容器右边（right）为20px，距离底边（bottom）为50px

• 为了适应background-image的多个图片，background-position也可以为多个背景图设置值，用逗号分隔多个值。

  比如： background-position:2px 3px,5px 8px;

---

四、结语

所谓站在巨人的肩膀上会看得更清楚。上述总结只不过是我查阅网上的一些资料整理加上自己的理解所写。感谢上述引用的网站提供的图片和知识。多谢他们的无私分享。知识在于积累，灵感来源于分享！

原文链接