CSS 2.1 参考手册/background-position

定义

background-position属性指定了背景图片的位置. 如果仅给定了一个百分比或长度值的话, 该值会被应用到横向的位置, 而纵向的值会被自动设置为50%. 如果给定了两个值，则第一个值为横向位置. background-position属性的值可以为关键字、长度值或百分比以及他们的组合, (例如, 50% 2cm 或 center 2cm 或 center 10%). 出于逻辑，当使用关键字和非关键字的组合时，left和right只能用于第一个值，而top或bottom只能用于第二个值。

案例

a.external {
   padding-right: 16px;
   background-image: url('images/arrow.gif');
   background-repeat: no-repeat;
   background-position: right;
}

特性

可能的值

• 百分比 百分比

第一个值为横向位置，第二个值为综向位置。值0% 0%表示元素边框内的最左上角。下图演示了在CSS box模型中百分比值和他们所代表的位置：

/*预留图片 CSS box模型的示意图*/

下图为浏览器中背景图在65% 32%位置的屏幕截图：

/*预留图片示例图*/

• 百分比

背景图片的横向位置。纵向值被自动设为50%

• 长度 长度

第一个值为横向位置，第二个值为纵向位置。以元素边框以内的左上角为基准。

• 长度

背景图片的横向位置，纵向位置自动被设为50%.

• top left

相当于 0% 0%.

• left top

相当于 0% 0%.

• top

相当于 50% 0%.

• top center

相当于 50% 0%.

• center top

相当于 50% 0%.

• right top

相当于 100% 0%.

• top right

相当于 100% 0%.

• left

相当于 0% 50%.

• left center

相当于 0% 50%.

• center left

相当于 0% 50%.

• center

相当于 50% 50%.

• center center

相当于 50% 50%.

• right

相当于 100% 50%.

• right center

相当于 100% 50%.

• center right

相当于 100% 50%.

• bottom left

相当于 0% 100%.

• left bottom

相当于 0% 100%.

• bottom

相当于 50% 100%.

• bottom center

相当于 50% 100%.

• center bottom

相当于 50% 100%.

• bottom right

相当于 100% 100%.

• right bottom

相当于 100% 100%.

• inherit

使用父对象的计算值。

默认值

0% 0%

适用于

所有元素。

继承

没有。

另见

• background
• background-color
• background-repeat
• background-attachment
• 原文地址：http://xhtml.com/en/css/reference/background-position/