background-origin 与 background-position

[nfssuzukaze]

background-origin （设置 background-position 的参照区域）

当 background-attachment 为 fixed 时，background-position 的参照区域是浏览器可视区，background-origin 不起作用

属性值

• content-box
• padding-box
• margin-box

background-position（参照 background-origin 设置图片的位置）

属性值

取值类型
length
percentage
keyword	center	top	bottom	left	right

第一组：水平方向

• 一个值：
  • length ：表示背景的左边距参照区左边的距离
  • percentage ：表示背景自左向右的 percentage 点与参照区自左向右的 percentage 点对齐
  • keyword ： center，left，right
• 两个值：
  • keyword(left | right) + length | percentage ：表示距参照区左边或右边 length | percentage

    第二组：垂直方向（取值与水平方向类似）

例子

example1

• 当 background-origin 为 border-box 时，backboard-position 会以 border 与 margin 的交界处为基准
• 当 background-position 只有一个值的时候，第二个值默认为 center

example2

• 当 background-origin 为 padding-box 时，background-position 会以 border 与 padding 的交界处为基准
• 当 background-position 的参数超过两个后，每两个参数为一类

example3

• 当 background-origin 为 content-box 时，background-position 会以 padding 与 content 的交界处为基准
• background-position 的负值表示反向移动