手册
目录
收藏247
分享
阅读1027
更新时间2025-07-16
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 中支持。
单位可以是像素或其他 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 | 不支持 |
教程：CSS 背景
CSS 参考：background-image 属性
CSS 参考：background-position 属性
CSS 参考：background-position-x 属性
HTML DOM 参考：backgroundPosition 属性
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
