关于css:CSS-背景位置-backgroundposition属性

background-position 属性须要 2 个参数值，第一个值用于横坐标，第二个值用于纵坐标，默认值为 0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值，则用于 x 轴方向，y 轴方向应用默认值 center，即垂直居中。
例子

div {
 width: 200px;
 height: 200px;
 border: 1px dashed #ccc;
 background-repeat: no-repeat;
 background-position: center center;
 background-image: url(img/bg.gif);
}

背景图像有 3 种定位形式

关键字定位

程度方向可选关键字有 left | center | right，垂直方向可选关键字有 top | center | bottom。

关键字定位，利用的是对齐规定，而不是坐标规定。xpos 为 left 示意图像的右边与对象的右边对齐，为 right 示意图像的左边和对象的左边对齐；ypos 为 top 示意图像的顶部和对象的顶部对齐，为 bottom 示意图像的底部和对象的底部对齐；xpos、ypos 等于 center 示意图像在程度和垂直方向的核心，和对象在程度和垂直方向的核心对齐

上述例子定位，就示意背景图像的核心，与背景区域的核心对齐，即背景图像位于对象的地方地位

百分比定位

x% y%：示意应用百分比定位，是将图像自身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。最终失去背景图像起始地位坐标的计算公式为：

x = (对象的宽度 – 图像的宽度) * x%;

y = (对象的高度 – 图像的高度) * y%;
当然，百分比的值也能够是负值，计算公式仍然不变
下面的例子，把百分比改为 -50% -50%。此时，失去背景图像起始地位的坐标为：

x：(200px – 100px) (-50%) = 100px (-50%) = -50px

y：(200px – 100px) (-50%) = 100px (-50%) = -50px

长度值定位

x y：示意应用长度值定位，是将背景图像的左上角，搁置在对象的背景区域中（x, y）所指定的地位，即 x, y 定义的是背景图像的左上角，绝对于背景区域左上角的偏移量。

偏移量长度能够是正值，也能够是负值。x 为正值示意向右偏移，负值示意向左偏移；y 为正值示意向下偏移，负值示意向上偏移。背景图像产生挪动后，就有可能超出对象的背景区域。此时，超出的局部将不会显示，只会显示落入背景区域的局部。