CSS background-position-y属性

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

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

下面有更多 "亲自试一试" 示例。

定义和用法

这个background-position-y属性设置背景图片在 y 轴上的位置。

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

默认值：	0%
遗传：	不
可动画：	是的。阅读可动画的尝试一下
版本：	CSS3
JavaScript 语法：	对象.style.backgroundPositionY="center"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
background-position-y	1.0	12.0	49.0	1.0	15.0
background-position-y (with two value syntax)	Not supported	Not supported	49.0	15.4	Not supported

background-position-y: value;

Value	Description	Demo
top	Positions background top on y-axis.	Demo ❯
bottom	Positions background bottom on y-axis.	Demo ❯
center	Positions background center on y-axis.	Demo ❯
y%	Top side is 0% on y-axis, and bottom side is 100%. Percentage value refers to height of background positioning area minus height of background image.	Demo ❯
ypos	Vertical distance from top side. Units can be pixels (0px) or any other CSS units.	Demo ❯
ypos offset	Two value syntax, only supported in Firefox and Safari. - ypos is set either to "top" or "bottom". - offset is vertical distance from background image and "top" or "bottom" side set with ypos. Units can be pixels or any other CSS units.
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit