คุณสมบัติ background-position-y CSS

คำอธิบายและวิธีใช้

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