CSS 背景位置 background-position属性

Posted 2021-09-10 star

background-position属性需要 2 个参数值，第一个值用于横坐标，第二个值用于纵坐标，默认值为 0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值，则用于 x 轴方向，y 轴方向使用默认值 center，即垂直居中。
例子

div {
 width: 200px;
 height: 200px;
 border: 1px dashed #ccc;
 background-repeat: no-repeat;
 background-position: center center;
 background-image: url(img/bg.gif);
}

背景图像有 3 种定位方式

关键字定位

水平方向可选关键字有 left | center | right，垂直方向可选关键字有 top | center | bottom。

关键字定位，应用的是对齐规则，而不是坐标规则。xpos 为 left 表示图像的左边与对象的左边对齐，为 right 表示图像的右边和对象的右边对齐；ypos 为 top 表示图像的顶部和对象的顶部对齐，为 bottom 表示图像的底部和对象的底部对齐；xpos、ypos等于 center表示图像在水平和垂直方向的中心，和对象在水平和垂直方向的中心对齐

上述例子定位，就表示背景图像的中心，与背景区域的中心对齐，即背景图像位于对象的中央位置

百分比定位

x% y%：表示使用百分比定位，是将图像本身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。最终得到背景图像起始位置坐标的计算公式为：

x = (对象的宽度 - 图像的宽度) * x%;

y = (对象的高度 - 图像的高度) * y%;
当然，百分比的值也可以是负值，计算公式依然不变
上面的例子，把百分比改为 -50% -50%。此时，得到背景图像起始位置的坐标为：

x：(200px - 100px) (-50%) = 100px (-50%) = -50px

y：(200px - 100px) (-50%) = 100px (-50%) = -50px

长度值定位

x y：表示使用长度值定位，是将背景图像的左上角，放置在对象的背景区域中（x, y）所指定的位置，即 x, y 定义的是背景图像的左上角，相对于背景区域左上角的偏移量。

偏移量长度可以是正值，也可以是负值。x 为正值表示向右偏移，负值表示向左偏移；y 为正值表示向下偏移，负值表示向上偏移。背景图像发生移动后，就有可能超出对象的背景区域。此时，超出的部分将不会显示，只会显示落入背景区域的部分。