background-position用于控制背景图在元素中的起始位置，可通过关键词（如top left、center）、长度值（如20px 10px）或百分比（如50% 50%）设置；单值时另一方向默认居中，多背景图时用逗号分隔对应位置值，实现精确布局。
在CSS中，background-position 属性用于控制背景图像在元素中的起始位置。这个属性可以精确指定背景图相对于容器的定位点，适用于单张或多张背景图的布局。
使用关键词设置位置
最直观的方式是使用预定义的关键词来设定背景位置：
- top left — 图像左上角对齐容器
- top center — 图像顶部居中
- bottom right — 图像右下角对齐容器
- center — 水平和垂直都居中（等同于 50% 50%）
这些关键词组合灵活，适合快速布局。
使用长度和百分比值
更精细的控制可以通过具体数值实现：
立即学习“前端免费学习笔记（深入）”；
- 用像素（px）、em 等单位：如 background-position: 20px 10px; 表示从左边偏移20px，顶部偏移10px
- 用百分比：如 background-position: 50% 50%; 将图像中心与容器中心对齐；100% 0% 表示图像右上角对齐容器右上角
百分比计算方式是：容器尺寸 × 百分比 = 背景图像参考点的位置。例如，50% 会将图像的50%处对齐到容器的50%处。
使用单值和双值语法
background-position 支持不同数量的参数：
- 一个值时，默认第二个值为 center。如 background-position: 20px; 等价于 20px center
- 两个值时，第一个是水平方向，第二个是垂直方向：如 left 20%、50px bottom
注意书写顺序：先X轴后Y轴，即使只写一个方向关键词，另一个仍默认为居中。
多背景图的位置控制
当设置多个背景图像时，可以用逗号分隔每个图像的位置：
background-position: 0 0, center, 100% 20px;
每个值对应一个背景图，顺序一一匹配，便于复杂视觉布局。
基本上就这些方法，掌握关键词、数值和多图配置，就能灵活控制背景显示位置。
