background-position

梗概

• background-position 属性被指定为一个或多个 <position> 值，用逗号隔开。
  • 每个<position> 对应一个background-image，指定它的相对background-origin的位置，从这个位置开始显示背景图片

<position>的值

一个值

示例

background-postion: center

两个值

• 分别指定X轴和Y轴的偏移
  • 可以使用数值或关键字

示例

background-position: 25% 75%;

三个值

• 其中两个是关键字，一个是数值
  • 关键值分别指定X方向和Y方向，指定不受顺序影响
  • 数值指定它前面关键字的偏移量

示例

background-position: bottom 10px right;
background-position: right top 10px;
background-position: top right 10px;

• 第一条指定了X方向为right，Y方向是bottom，并且往上偏移了10px
• 第二条指定了X方向为right，Y方向是top，并且往上偏移了10px
• 第三条指定了X方向为right，并且往左偏移了10px，Y方向是top

四个值

四个值的语法： 第一个和第三个值是定义 X 和 Y 的关键字值。第二个和第四个值是前面 X 和 Y 关键字值的偏移量

示例

background-position: right 3em bottom 10px;

示例

background-position:
  0 0,
  center;

• 指定了第一个background-image偏移了0和0
• 指定了第二个background-image从中间开始显示