background-position 属性设置元素背景图像的初始位置。图像的位置相对于 background-origin 属性设置的值。
属性值
<position>:定义x/y坐标，相对于边缘元素的盒子。
使用一到四个值定义。
当传递两个非关键字值时，第一个值指定水平方向位置，第二个值指定垂直位置。
仅指定一个值时，第二个值被视为居中。
当指定三个或四个值时，它们被视为前面关键字值的偏移量。
单个值语法:以下之一可能是值:
center:关键字 center，使位置居中。
top, left, bottom, 或 right:指定图像定位的边缘。其他值设置为 50%。
<length> 或 <percentage>:指定相对于 X 坐标到元素的左边缘，Y 坐标设置为 50%。
双值语法:一个值定义X 坐标和另一个 Y 坐标。该值可以是以下之一:
top, left, bottom, 或 right：无论指定哪两个值，都表示 X 和 Y 坐标。
<length> 或 <percentage> :当其他值是left或right时，定义Y坐标，当top或bottom时，它定义X坐标。当两个值都是长度或百分比时，首先分别定义 X 和第二个 Y 坐标。
top top | bottom bottom | left right | right left: 无效值。
成对关键字的顺序并不重要，因为浏览器会对值重新排序。因此，左上角与左上角相同。
将关键字与 <length> 或 <percentage> 值配对时，顺序很重要。因此 left 20px 和 left 20px 不一样。
默认值为左上或 0% 0%。
三值语法:两个是关键字值，第三个是前一个值的偏移量。
top、left、bottom、right 或 center:当指定 left 或 right 值时，表示 X 坐标。当指定顶部或底部时，表示 Y 坐标。
<length> 或 <percentage>:当作为第二个值传递时，它是第一个值的偏移量，当作为第三个值传递时，它是第二个值的偏移量。
单个长度或百分比值是前一个关键字值的偏移量。
一个关键字与两个长度或百分比值的组合无效。
四值语法:第一个和第三个是关键字值，指定 X 和 Y 坐标。第二个和第四个值是前面关键字值的偏移量。
上、左、下或右:第一个和第三个值作为关键字。当 left 或 right 作为第一个值时，第一个表示 X 值，其他表示 Y 值。当顶部或底部作为第一个值给出时，它定义 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('/css/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('/css/images/smiley.png');
background-repeat: no-repeat;
background-position: bottom;
}
.twovalue {
background-image: url('/css/images/smiley.png');
background-repeat: no-repeat;
background-position: right top;
}
.threevalue {
background-image: url('/css/images/smiley.png');
background-position: right 3em bottom;
}
.fourvalue {
background-image: url('/css/images/smiley.png');
background-position: top 25% left 40%;
}
</style>
</head>
<body>
<div class="onevalue">1值语法</div>
<div class="twovalue">2值语法</div>
<div class="threevalue">3值语法</div>
<div class="fourvalue">4值语法</div>
</body>
</html>