导航分类

CSS background-position-x 属性 CSS background-repeat 属性

CSS background-position-y 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

background-position-y是 CSS 中用于设置元素背景图像垂直位置（y 轴位置）的属性。

background-position-y通常与background-position-x配合使用，分别控制背景图像的垂直和水平位置。

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

常用的实例

接下来通过多个实例演示background-position-y属性的用法，来深化您对background-position-y属性的理解。

1. 使用关键字设置背景图像在 y 轴的位置

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/deer.png');
    background-repeat: no-repeat;
    background-position-y: center;
}

2. 使用百分比设置背景图像在 y 轴的位置

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/deer.png');
    background-repeat: no-repeat;
    background-position-y: 20%;
}

3. 使用像素设置背景图像在 y 轴的位置

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/deer.png');
    background-repeat: no-repeat;
    background-position-y: 50px;
}

CSS 语法

background-position-y: value;

属性值

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

浏览器支持

表中的数字指定了完全支持background-position-y属性的第一个浏览器版本。


单值语法	1.0	12.0	49.0	1.0	15.0
双值语法	不支持	不支持	49.0	15.4	不支持

CSS background-position-y 属性

定义和用法

常用的实例

1. 使用关键字设置背景图像在 y 轴的位置

2. 使用百分比设置背景图像在 y 轴的位置

3. 使用像素设置背景图像在 y 轴的位置

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

CSS background-position-y 属性

定义和用法

常用的实例

1. 使用关键字设置背景图像在 y 轴的位置

2. 使用百分比设置背景图像在 y 轴的位置

3. 使用像素设置背景图像在 y 轴的位置

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

意见反馈

反馈提交成功