CSS background-position 属性

CSS background-position 属性

background-position -- 定义背景图片的位置

取值: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top| center | bottom ]? ] | [ [ left | center | right ] || [ top| center | bottom ] ] | inherit

水平

left: 左

center: 中

right: 右

垂直

top: 上

center: 中

bottom: 下

垂直与水平的组合

x-% y-%

x-pos y-pos

inherit: 继承

引用网址:http://www.dreamdu.com/css/property_background-position/

初始值: 0% 0%

继承性: 否

适用于: 所有元素

background:背景.position:位置.

示例

body

{

background-image

:

url('list-orange.png')

;

background-repeat

:

no-repeat

;

}

p

{

background-image

:

url('list-orange.png')

;

background-position

:

right bottom

;

background-repeat

:

no-repeat

;

}

div

{

background-image

:

url('list-orange.png')

;

background-position

:

50% 20%

;

background-repeat

:

no-repeat

;

}

[/code]
屏幕左上角显示一个橙色点.p段落的右下角显示一个橙色点.div中间偏上显示一个橙色点.

说明

background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.
例如:
<percentage> <percentage>
左上角为0%, 0%. 右下角为100%, 100%.例如58%,56%就是从左上角算起,右移58%,下移56%.
<length> <length>
6cm 8cm,从左上角算起,右移6cm,下移8cm.

下面是一些等式

topleft, left top等价于 0% 0%.

top, topcenter, center top等价于 50% 0%.

right top, topright 等价于 100% 0%.

left, left center, center left 等价于 0% 50%.

center, center center 等价于 50% 50%.

right, right center, center right 等价于 100% 50%.

bottom left, left bottom 等价于 0% 100%.

bottom, bottom center, center bottom 等价于 50% 100%.

bottom right, right bottom等价于 100% 100%.

CSS background-position 属性示例 -- 可以尝试编辑

http://www.xin0.cn