CSS background-position 属性
示例
如何定位背景图像
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
亲自试一试 »
下面有更多“亲自试一试”示例。
定义和用法
background-position 属性设置背景图像的起始位置。
提示：默认情况下，背景图像放置在元素的左上角，并在垂直和水平方向上重复。
| 默认值 | 0% 0% |
|---|---|
| 继承 | 否 |
| 可动画 | 是。 了解有关可动画的信息 试一试 |
| 版本 | CSS1 |
| JavaScript 语法 | object.style.backgroundPosition="center" 试一试 |
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 语法
background-position: value;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom |
如果只指定一个关键字，则另一个值为“center” | 演示 ❯ |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果只指定一个值，则另一个值为 50%。默认值为：0% 0% | 演示 ❯ |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位可以是像素 (0px 0px) 或任何其他CSS 单位。如果只指定一个值，则另一个值为 50%。您可以混合 % 和位置 | 演示 ❯ |
| initial | 将此属性设置为其默认值。了解有关initial的信息 | |
| inherit | 从其父元素继承此属性。了解有关inherit的信息 |
更多示例
示例
如何将背景图像定位在顶部中央
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
亲自试一试 »
示例
如何将背景图像定位在右下角
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}
亲自试一试 »
示例
如何使用百分比定位背景图像
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
亲自试一试 »
示例
如何使用像素定位背景图像
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 150px;
}
亲自试一试 »
示例
使用不同的背景属性创建“英雄”图像
.hero-image {
background-image: url("photographer.jpg"); /* 使用的图像 */
background-color: #cccccc; /* 如果图像不可用则使用 */
height: 500px; /* 必须设置指定的高度 */
background-position: center; /* 居中图像 */
background-repeat: no-repeat; /* 不要重复图像 */
background-size: cover; /* 调整背景图像大小以覆盖整个容器 */
}
亲自试一试 »
相关页面
CSS 教程：CSS 背景
CSS 参考：background-image 属性
HTML DOM 参考：backgroundPosition 属性
