CSS background-position-y 属性

定义和用法

background-position-y 属性用于设置背景图像在 y 轴上的位置。

提示：默认情况下，背景图像会被放置在元素的左上角，并在垂直和水平方向上重复。

如何在 y 轴上定位背景图像：

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

如何将背景图像定位到顶部：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

如何使用百分比在 y 轴上定位背景图像：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

如何使用像素在 y 轴上定位背景图像：

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

background-position-y: value;

值	描述
top	将背景定位在 y 轴的顶部。
bottom	将背景定位在 y 轴的底部。
center	将背景定位在 y 轴的中心。
y%	y 轴的顶部为 0%，底部为 100%。百分比值指的是背景定位区域的高度减去背景图像的高度。
ypos	从顶部的垂直距离。单位可以是像素（如 0px）或其他 CSS 单位。
ypos offset	双值语法，仅在 Firefox 和 Safari 中支持。 ypos 设置为 top 或 bottom。 offset 是背景图像与 ypos 设置的顶部或底部的垂直距离。单位可以是像素或其他 CSS 单位。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

默认值：	0%
继承性：	否
动画制作：	支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.backgroundPositionY="center"

表格中的数字表示首个完全支持该属性的浏览器版本。

	Chrome	Edge	Firefox	Safari	Opera
单值语法	1.0	12.0	49.0	1.0	15.0
双值语法	不支持	不支持	49.0	15.4	不支持