#background-position

#介绍

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

#使用示例

css-apisrc/background-position/App.tsx

Code

预览

#语法

/* 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;

#取值

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

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

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

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

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

#形式定义

#形式语法

[ 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

#兼容性