background-position

介绍

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

使用示例

语法

/* 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,用来居中背景图片。

  • 关键字 topleftbottomright。用来指定把这个背景图放在哪一个边缘。

    • 如果只指定一个值,另一个唯独默认被设置成 50%(与 center 等效)。
    • 如果一个值是 topbottom,另一个值不能再次指定 topbottom 否则解析时会报错。
    • 如果一个值是 leftright,同理另一个值不能再次指定 leftright
  • <length><percentage>。指定相对于左边缘 x 轴或上边缘 y 轴的的坐标。

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

形式定义

初始值0% 0%
适用元素all elements
是否支持继承no
是否支持动画no

形式语法

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

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

与 Web 的区别

  • 不支持 Global Value 类型的关键字 inheritinitialunset
  • 不支持 Edge offsets 语法,例如:
background-position: bottom 10px right 20px

兼容性

LCD tables only load in the browser

除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。