background-position

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

• 0% 0% (默认值)
• 百分比
• 关键字
• x轴关键字:
  • top
  • center
  • bottom
• y轴关键字:
  • left
  • center
  • right
• 像素

百分比

background-position的百分比的对齐方式是什么? 答: 图片的百分比位置与元素的百分比位置进行对齐,默认是左上角(原点),见下例:

• 绿色:图片(33%,33%)点
• 红色:元素(33%,33%)点

设置background-position: 33% 33%后

关键字

知到了上面的百分比如何对齐之后,关键字就好理解了

• x轴:
  • top -> 0%
  • center -> 50%
  • bottom -> 100%
• y轴:
  • left -> 0%
  • center -> 50%
  • right -> 100% 如:background-position: bottom center

像素

像素就是平移图片,正x轴往右,正y轴往下