CSS属性 - background-position 背景位置属性

说明

该CSS属性用来设定背景图片的位置。背景所涉及的是 content 和 padding 区域,请参见 CSS 盒子模式 (Box Model)

值:[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit

可用值值的说明
length浮点数后跟绝对长度单位 (cm, mm, in, pt, or pc) 或相对长度单位 (em, ex, or px)。
percentage整数后跟百分号 (%)。表示对象宽或高的百分比。
vAlignment垂直对齐值。可用值有:top, center, bottom。
hAlignment水平对齐值。可用值有:left, center, right。

该CSS属性的缺省值为 0% 0%。

如果只设定一个值,这个值作为横坐标值,而纵坐标则设成 50%。如果两个值都设,第一个值作为横坐标,第二个值作为纵坐标。

允许一个用 length 值,一个用 percentage 值。如:50% 2cm。

允许负值。

background-position 应和 background-image 一起用。

示例代码

body {background-image:url(background.gif);
background-repeat:no-repeat; background-position:20px 60px}
body { background: url("banner.gif") right top }    /* 100%   0% */
body { background: url("banner.gif") top center }   /*  50%   0% */
body { background: url("banner.gif") center }       /*  50%  50% */
body { background: url("banner.gif") bottom }       /*  50% 100% */

继承

适用于

所有块元素和可替换元素 (block-level and replaced elements)。