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	不支持