CSS背景定位
background-position: xpos ypos | x% y% | x y
xpos ypos
使用预定义关键字定位,水平方向可选的关键字 left | center | right,垂直方向可选关键字有 top | center | bottom。
关键字定位,应用的是对齐规则,而不是坐标规则。xpos 为 left 表示图像的左边与对象的左边对齐,为 right 表示图像的右边和对象的右边对齐;ypos 为 top 表示图像的顶部和对象的顶部对齐,为 bottom 表示图像的底部和对象的底部对齐;xpos、ypos等于 center表示图像在水平和垂直方向的中心,和对象在水平和垂直方向的中心对齐。
x% y%
x% y%:表示使用百分比定位,是将图像本身(x%, y%)的那个点,与背景区域的(x%, y%)的那个点重合。最终得到背景图像起始位置坐标的计算公式为:
x = (对象的宽度 - 图像的宽度) * x%;
y = (对象的高度 - 图像的高度) * y%;
x y
x y:表示使用长度值定位,是将背景图像的左上角,放置在对象的背景区域中(x, y)所指定的位置,即 x, y 定义的是背景图像的左上角,相对于背景区域左上角的偏移量。
偏移量长度可以是正值,也可以是负值。x 为正值表示向右偏移,负值表示向左偏移;y 为正值表示向下偏移,负值表示向上偏移。背景图像发生移动后,就有可能超出对象的背景区域。此时,超出的部分将不会显示,只会显示落入背景区域的部分。