background-position

语法:

background-position<position> [ , <position> ]*

<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]

默认值0% 0%,效果等同于left top

取值:

<percentage>
用百分比指定背景图像填充的位置。可以为负值。
<length>
用长度值指定背景图像填充的位置。可以为负值。
center:
背景图像横向和纵向居中。
left:
背景图像在横向上填充从左边开始。
right:
背景图像在横向上填充从右边开始。
top:
背景图像在纵向上填充从顶部开始。
bottom:
背景图像在纵向上填充从底部开始。

说明:

设置或检索对象的背景图像位置。必须先指定background-image属性。
  • 该属性提供2个参数值。
  • 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
  • 如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。
  • 对应的脚本特性为backgroundPosition

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-8.0 #1 4.0 5.1 13.0 11.50
版本 9.0
  1. IE8及更早浏览器不支持CSS3 Background-position定义多组位置,只支持单组。

示例: