css background-position 属性设置元素的背景图像的初始位置。图像的位置相对于 background-origin 属性设置的值。
可能的值
<position>：定义 x/y 坐标，该坐标相对于元素框的边缘。
- 使用 1 到 4 个值定义。
- 当传递两个非关键字值时，第一个值指定水平位置，第二个值指定垂直位置。
- 当只指定一个值时，第二个值被视为中心。
- 当指定了三个或四个值时，它们将被视为关键字值之前的偏移量。
One-value syntax：值可能是以下值之一：
- center：关键字中心，表示位置居中。
- top、left、bottom 或 right：指定图像要定位的边缘。其他值设置为 50%。
- <length> 或 <percentage>：指定相对于元素左边缘的 X 坐标，并将 Y 坐标设置为 50%。
Two-value syntax：一个值定义 X 坐标，另一个值定义 Y 坐标。以下值之一可能是：
- top、left、bottom 或 right：无论指定哪个值，都表示 X 和 Y 坐标。
- <length> 或 <percentage>：当其他值在左边或右边时，它定义 Y 坐标，当顶部或底部时，它定义 X 坐标。当两个值都是长度或百分比时，首先分别定义 X 坐标和第二个 Y 坐标。
- top top | bottom bottom | left right | right left：值无效。
- 配对关键字的顺序并不重要，因为浏览器会对值进行排序。因此，左上角与左上角相同。
- 在将关键字与 <length> 或 <percentage>值配对时，顺序很重要。因此，剩下的 20px 和剩下的 20px 是不一样的。
- 默认值为 left top 或 0% 0%。
Three-value syntax：两个是关键字值，第三个是前一个值的偏移量。
- top、left、bottom、right 或 center：当指定了 left 或 right 值时，表示 X 坐标。当指定 top 或 bottom 时，表示 Y 坐标。
- <length> 或 <percentage>：当它作为第二个值传递时，它是第一个值的偏移量，当它作为第三个值传递时，它是第二个值的偏移量。
- 单个长度或百分比值是关键字值之前的偏移量。
- 一个关键字和两个长度或百分比值的组合无效。
Four-value syntax：第一个和第三个是关键字值，指定 X 和 Y 坐标。第二个和第四个值是前面的关键字值的偏移量。
- top、left、bottom 或 right：第一个和第三个值作为关键字。当 left 或 right 作为第一个值时，第一个表示 X 值，另一个表示 Y 值。当 top 或 bottom 作为第一个值给出时，它定义 Y 值，另一个表示 X 值。
- <length> 或 <percentage>：当它作为第二个和第四个值传递时，第二个值是第一个关键字值的偏移量，第四个值是第二个关键字值的偏移量。
百分比值
背景图像位置的偏移百分比是相对于容器的偏移量。有关更多说明，请参阅下面给出的要点：
- 0% 表示图像的上边缘或左边缘与容器的顶部或左边缘对齐。
- 100% 表示图像的底部或右边缘与容器的底部或右边缘对齐。
- 50% 将图像与容器水平或垂直居中。
- 75% 25% 表示图像将从左侧 75% 放置，从容器顶部放置 25%。
适用于
所有 HTML 元素。
DOM 语法
object.style.backgroundPosition = "top 30%";
CSS background-position - 单值语法
下面是一个示例，其中图像使用单值语法进行定位：
<html>
<head>
<style>
.position-right {
background-image: url('images/tutimg.png');
background-position: right;
background-repeat: no-repeat;
width: 500px;
height: 300px;
border: 3px solid black;
position: relative;
}
</style>
</head>
<body>
<div class="position-right"></div>
</body>
</html>
CSS background-position - 不同类型的语法
以下示例显示了所有不同类型的语法格式：
<html>
<head>
<style>
div {
background-color: gainsboro;
background-repeat: no-repeat;
width: 300px;
height: 100px;
margin-bottom: 12px;
}
.onevalue {
background-image: url('images/smiley.png');
background-repeat: no-repeat;
background-position: bottom;
}
.twovalue {
background-image: url('images/smiley.png');
background-repeat: no-repeat;
background-position: right top;
}
.threevalue {
background-image: url('images/smiley.png');
background-position: right 3em bottom;
}
.fourvalue {
background-image: url('images/smiley.png');
background-position: top 25% left 40%;
}
</style>
</head>
<body>
<div class="onevalue">One-value syntax</div>
<div class="twovalue">Two-value syntax</div>
<div class="threevalue">Three-value syntax</div>
<div class="fourvalue">Four-value syntax</div>
</body>
</html>
