CSS background-position 属性
示例
如何定位背景图片
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
background-position 属性设置背景图片的起始位置。
提示： 默认情况下，背景图片放置在元素的左上角，并垂直和水平重复。
| 默认值 | 0% 0% |
|---|---|
| 继承 | no |
| 可动画 | 是的。 阅读关于可动画的内容 尝试一下 |
| 版本 | CSS1 |
| JavaScript 语法 | object.style.backgroundPosition="center" 尝试一下 |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 语法
background-position: 值;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| 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 属性
