background-position

介绍

background-position 为每一个背景图片设置初始位置。这个位置是相对于由background-origin定义的位置图层。

取值

• 关键字center，用来居中背景图片。

• 关键字top，left，bottom，right。用来指定把这个背景图放在哪一个边缘。

  • 如果只指定一个值，另一个唯独默认被设置成 50%(与center等效)。
  • 如果一个值是top或bottom，另一个值不能再次指定top或bottom否则解析时会报错。
  • 如果一个值是left或right，同理另一个值不能再次指定left或right。

• <length>或<percentage>。指定相对于左边缘 x 轴或上边缘 y 轴的的坐标。

  • 如果只指定一个值，这个值指定的是相对于左边缘 x 轴的坐标。相对于上边缘 y 轴的坐标会默认被设置成 50%。

样例：

/_ Keyword values _/
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/_ <percentage> values _/
background-position: 25% 75%;

/_ <length> values _/
background-position: 0px 0px;
background-position: 1rem 2rem;
background-position: 10em 8em;

/_ Multiple images _/
background-position: 0px 0px, center;

标准化语法

[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]

<length-percentage> = <length> | <percentage>

与 Web 的区别

• 不支持Global Value类型的关键字inherit、initial和unset。
• 不支持Edge offsets语法，例如:

background-position: bottom 10px right 20px