CSS background-position 属性值说明
| 值 | 说明 |
|---|---|
| left right top top bottom center | 设置背景图像的位置。在我们只设置一个值的情况下，另一个值将是“center”中心。 |
| x% y% | 第一个值设置水平位置，而第二个值设置垂直位置。0%0%是左上角。100%是右下角。如果只设置一个值，另一个值将为50%。0%0%是默认值。 |
| xpos, ypos | 第一个值设置水平位置，而第二个值设置垂直位置。单位可以是像素（0px 0px）。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
background-position: value;
background-position 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
</style>
</head>
<body>
<h2>Background-position 属性示例</h2>
<p>背景图像位于元素的左上角。</p>
</body>
</html>
结果
以百分比指定的 background-position 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 15%;
}
</style>
</head>
<body>
<h2>Background-position 属性示例</h2>
<p>
背景图像位于元素左侧 50% 和顶部 15% 的位置。
</p>
</body>
</html>
以像素为单位的背景位置属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/bg.png");
background-attachment: fixed;
background-position: 5px 50px;
}
</style>
</head>
<body>
<h2>Background-position 属性示例</h2>
<p>
背景图像位于距左侧 5px 和距顶部 50px 的位置。
</p>
</body>
</html>
具有“right 100px”值的 background-position 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right 100px;
}
</style>
</head>
<body>
<h2>Background-position 属性示例</h2>
<p>背景图像位于右侧，距离顶部 100 像素。</p>
</body>
</html>
具有“center center”值的 background-position 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("/bg.png");
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
<body>
<h2>Background-position 属性示例</h2>
<p>背景图像位于中心。</p>
</body>
</html>
CSS background-position 属性指定背景图像的起始位置。
如果设置了默认值，则背景位置将放置在元素的左上角。
如果我们将背景设置为重复，它将在垂直和水平方向重复。
| 初始值 | 0% 0% |
|---|---|
| 应用于 | 所有元素。它也适用于：::first-letter 和 ::first-line。 |
| 继承 | 无效 |
| 可动画的 | 是的，位置可以改变的。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.backgroundPosition=“center”； |
日期：2020-06-02 22:14:16 来源：oir作者：oir