CSS background-position属性控制背景图定位，支持像素值（如20px 10px）、关键字（如top left）和百分比（如50% 50%）三种方式，还可使用right 20px bottom 15px实现边缘偏移。

HTML本身不直接设置背景图偏移，实际是通过CSS的background-position属性控制背景图片在元素内的起始位置——它不是“移动图片”，而是指定**背景图上某一点**与**容器上某一点**对齐。

用像素值精准控制初始偏移

这是最直观、最常用于微调的方式。写法如background-position: 20px 10px，含义是：

• “背景图中距离左边20px、上边10px的那个点”与容器的左上角对齐
• 第一个值是水平位置（正数向右，负数向左）
• 第二个值是垂直位置（正数向下，负数向上）
• 必须配合background-image使用，且background-repeat: no-repeat通常一起加，避免重复干扰定位效果

用关键字快速定位常见方位

适合不需要像素级精度的场景，语义清晰、易读易写：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• center 等价于 50% 50%，居中显示
• top left（左上）、bottom right（右下）、center top（顶部居中）等组合
• 只写一个关键字时，另一个默认为center，例如background-position: right → right center

用百分比实现响应式对齐逻辑

百分比不是偏移量，而是对齐比例关系：

立即学习“前端免费学习笔记（深入）”；

• 0% 0%：背景图左上角对齐容器左上角
• 100% 100%：背景图右下角对齐容器右下角
• 50% 50%：背景图中心点对齐容器中心点（即居中）
• 比如background-position: 90% 10%，会让背景图右侧靠右、顶部略高，适合右上角图标类布局

进阶：从边缘反向偏移（现代浏览器支持）

想让图片距离右边20px、底部15px？可直接写：

• background-position: right 20px bottom 15px
• 这种四值语法更符合直觉，但需注意兼容性：主流新版本浏览器均支持，旧版IE不支持
• 建议搭配降级写法，例如先写background-position: bottom right，再覆盖为right 20px bottom 15px