为元素应用背景图片大概是CSS中最常使用的特性之一，并且有很多背景属性来让我们控制元素背景的各方面表现。
元素可以有多个背景图片。如果想要应用多个背景图片，你可以为元素提供一个逗号分隔的列表值作为background-image属性，而background-position属性用于指定图片的位置。这个属性很多不同的可能值，各有不同的效果，而且一些值可能对于CSS初学者来说很陌生，值得深入研究。
为了保持本文中代码和概念上一致，我们在示例中只放置一张背景图片。一张背景图片的应用情形对多张背景图片同样适用。
背景图片被放置在元素的背景放置区(backfround positioning area)内，这个放置区，正如他的名字所述，指定了背景图片将被放置的区域，用一套坐标体系来控制位置。
在我们深入挖掘位置概念之前，先快速的看一下CSS框模型(Box Model)，看看他是如何影响背景图片位置的。
CSS盒模型
CSS中一个元素拥有三个区域(称为盒子 Box)，边界框border box，填充框padding box，内容框content box。
- 边界框是元素内部结构加上边框区域；
- 填充框是除去边框的，包括元素内容和周围填充(由
padding属性指定)的区域； - 内容框是由元素内容创建的区域，不包括填充和边框；
元素盒子区域。图片来源：The Codrops CSS Reference, background-origin entry
其实还有第四个区域叫外边框margin box，包括这个元素和他的外部的边距，由margin属性指定。 (译者：外边框默认是透明的，不会遮挡其后的任何元素，不会应用这个元素的背景图片，是不是应该算这个元素的区域)。
当你给一个元素图片或者固定颜色的背景的时候，背景默认被画在整个填充框padding以内(这个行为可以由backfound-origin属性来修改，为了方便我们采用默认值不做修改)。
为了准确指定背景图片在放置区内的位置，这个区域需要坐标体系来转化表示位置的值，接下来我们仔细看一下这个坐标系。
元素的坐标系
由于元素在CSS中是一个盒模型，默认情况下，每个元素都有一个根据元素高度、宽度来建立的坐标系。这个坐标系可以用来定位与其他元素的相对关系，并定位元素与其内部子元素的相对关系。
HTML元素在CSS、SVG体系中有坐标系，然而，其本身没有相似的坐标系统，因为HTML元素不是用盒模型的概念管理的。
CSS盒模型的坐标系的原点在元素的左上角。
背景放置区也由建立在这个区域的坐标系来管理，这个坐标系原点在放置区的左上角。
因为默认的放置区是在填充框内，所以默认情况放置区的坐标原点在填充框左上角。
这意味着 当你为元素应用背景图片的时候，浏览器从填充框的左上角开始放置第一张以及随后的图片。
例如，假设你要为元素应用一张背景图片，并且没有设置背景重复。背景图的在放置区的初始位置就是填充框左上角。因此图片的左上角与填充框的左上角对齐。
来看看@SaraSoueidan在CodePen写的有关于background-position的示例：
这篇文章我们将会谈到的backgroud-position属性，我们能改变图片在坐标系中的位置。
但正如我们提到的，我们改变背景放置区，转而也会改变我们用来定位图片的坐标系原点。
使用background-origin改变背景放置区和坐标系
background-origin属性是用于改变在背景放置区定位背景图片的坐标系的原点。
它可以取如下三个值：padding-box(默认值)、content-box、border-box 依据你选择的背景放置区位置，对应的背景坐标系的原点相应改变。
下面的例子展示了不同的背景放置区。
对于每种指定的background-origin，坐标系都会转换并覆盖整个区域。
接下来我们就可以用background-position来指定背景图片的位置了。简单起见，我们下面都不会用background-origin来改变背景放置区了，所以下面的例子各元素的填充框就是背景放置的地方了。
使用background-position放置背景图片
在前面我们看到背景图片默认的被放置在放置区的左上角。这是由于background-position的默认的值是0%,0%。
默认的位置是一个百分比的值，提供百分比或绝对值(译者:absolute values，不是数学中的绝对值，下同)都可以，它指定了图片离放置区的四个边缘(top,right,bottom,left)的偏移量。
CSS坐标系中元素四个边缘的偏移量
作为补充，有五个关键词可用：top、right、bottom、left、center。
位置属性可以通过指定一个偏移量(关键词、百分比或长度)、两个偏移量(三种可能值取两个组合)、或者四个偏移量(一个关键词加一个相对数值)来描述。(接下来我们详细讨论)
background-position: top left;
background-position: 50px 30%;
background-position: top 25%;
background-position: right 10px bottom 20px;
background-position: center center
background-position: 10px 20px;
background-position: 5em 2em;
background-position: 75% 50%;
如果只提供了一个值，那么另一个方向即被假定为 center。如果提供了两个值，第一个会决定距离左边缘的偏移，即水平位置；第二个值会决定图片从上边缘向下的偏移，即竖直的位置。
background-position: 10% 50%; /* 10% of the width to the left(原文为right,**译者**认为是笔误) and 50% down from the top */
background-position: top; /* equivalent to `top center` */
background-position: 50px; /* equivalent to `50px center` */
你可以 混合搭配各个值，用百分比、长度、关键字来组合。
注意一对关键字可以交换顺序，一个关键字和百分比或长度的组合不能。因此center left是合法的，50% left则不正确，必须是left 50%。当使用一个关键字和一个长度或百分比的组合时，第一个值总是对应水平偏移,第二个对应竖直偏移。
事实上，关键字是特定百分比值的简写，比如：top相当于 距离上边缘偏移0%，bottom相当于距离上边缘偏移100%，left相当于距离左边缘偏移0%，right相当于距离左边缘偏移100%，center相当于距离任意它被应用的方向偏移50%(水平或竖直)。
让我们看看每一种取值组合是什么效果---这或许是最重要的事，因为浏览器使用绝对值和百分比值去放置背景图片的方式有很大的不同。接下来我们提供更多的例子。
使用绝对值的效果
当你用绝对值指定位置时，就是使背景图片偏离左上角一个特定的量。换句话说，图片会移动离开放置区左上角达到你在background-position中指定的偏移量。
最好的解释和理解的方式是看图，这里有两个绝对值background-position的例子，看看浏览器是怎样解释位置和放置背景图片的。两个示例中元素大小100px乘80px。
使用绝对值放置背景图片。
绝对值也可以是负数，这种情况下图片就会离开边缘反方向上偏移。
使用负数偏移量的例子。
使用百分比值的效果
不像使用绝对值的偏移量会从元素左上角移动一个特定的距离，百分比X%偏移会把图片水平宽度X%(或竖直高度X%)的点 与容器横向X%的点(或竖直高度X%) 对齐。
例如，绝对值位置0% 0%，会让图片0% 0%的点与背景放置区坐标系0% 0%的点对齐。绝对值位置50% 70%会把图片横向50%竖直70%的点与背景放置区横向50%竖直70%的点对齐。
可以看下面的例子。注意是如何用位置值来得到图片里的坐标点以及如何使它和放置区的同坐标的点对齐的。
使用百分比值放置背景图片。
和使用绝度值一样，百分比也可以有负数，负数移动图片到坐标轴相反的方向上。
为了更好理解这个，请使用之前的例子自行调试。
以上例子中位置都是相对顶部和左侧边缘的。现在我们来看看如何组合关键字和数值 来指定相对于元素的四个边缘的偏移 从而放置背景图。
相对任意边缘的偏移
上两节的例子中我们设定、体验了图片相对上边缘和左边缘的偏移的效果 (这对于有一个或两个值的 background-position来说是默认的)。
当使用组合关键词和数值成四个值的语法时，你就也能够指定背景图片相对于右边缘和底部边缘的偏移了。
为了这样做，你只需要指出你要用的边缘的名字，后面跟上你想要的偏移量就可以了。
例如下面的使用四个值语法的例子：
background-position: top 1em right 3em; /* positions the background image 1em down the top edge and 3em left of the right edge */
background-position: right 1em bottom 1em; /* positions the background image 1em above the bottom edge and 1em to the left of the right edge */
background-position: left 20px bottom 50px;
如果三个值已经指定好了，第四个被假定为0。
在使用四个值位置的语法时，一定要记得：当给出三个或四个值的时候，每个百分比或绝对长度都必须跟在一个关键词后面，用来指定从哪个边缘上偏移。例如：background-position: bottom 10px right 20px代表 竖直从下边缘偏移10px，水平从右边缘偏移20px。如果三个值已经指定好了，没给出的被假定为0。如果你给出了两个数值偏移量或一个关键词，那么值是无效的，浏览器会使用默认值0% 0%。
为了更好理解这个，请使用之前的例子自行调试。
尺寸，重复，剪裁等等
记住，你可以给一个元素应用多个背景图片。对于每个背景图片(给background-image属性一个逗号分隔的图片列表)，你可以个指定一个对应的背景位置，多个背景位置也是用逗号分隔的。
总共有九个CSS属性(有对应的短缩写)用来控制布局,每一个做一件事，组合这些属性就能很好的控制HTML中的背景图片了。希望这篇文章能解释清楚CSS中背景图片是如何定位的。
译者:除去background-color，确实有九个背景图片位置有关的属性:
background-image: ;
background-repeat: ;
background-attachment: ;
background-blend-mode: ;
background-clip: ;
background-origin: ;
background-position: ;
background-repeat: ;
background-size: ;
作为主要的背景属性的补充，现在出现了一个额外的属性允许我们为背景图片应用各种混合效果(和Photoshop中的类似)---background-blend-mode属性，如果你对学习CSS中混合效果感兴趣，你可以阅读这里。
特别声明：Codepen中示例如果背景图片没有正常展示出来，建议大家修改背景图片路径，自行测试效果。
希望这篇文章对你有帮助，感谢您的阅读。
本文根据Sara Soueidan的《A Primer To Background Positioning In CSS》所译。如需转载此译文，需注明英文出处：http://blogs.adobe.com/dreamweaver/2015/03/a-primer-to-background-positioning-in-css.html
译文地址：http://www.w3cplus.com/css/a-primer-to-background-positioning-in-css.html
Comments 1 条评论