background-position百分比的原点是背景图自身与容器的相对关系：0% 0%为图左上角对齐容器左上角，100% 100%为图右下角对齐容器右下角；50% 50%使图中心对齐容器中心，但图尺寸与容器差异会导致视觉偏移。
background-position 用百分比时，原点在哪？
百分比值的原点不是元素左上角，而是“背景图自身”和“容器”的相对关系：0% 0% 表示背景图的左上角对齐容器的左上角；100% 100% 表示背景图的右下角对齐容器的右下角。这导致实际偏移量取决于图片尺寸与容器尺寸的差值。
常见错误现象：background-position: 50% 50% 看起来没居中，尤其当背景图比容器小或大很多时。
- 如果背景图宽高都小于容器，
50% 50%是让图的中心点对齐容器中心点 —— 这是真居中 - 如果背景图宽 > 容器宽，
50% 50%实际是让图横向“中点”（即 width/2 处）对齐容器中点，视觉上图会向左“滑出”一部分 - 想强制让图左上角在容器内水平垂直居中？别用百分比，改用
center center或50% 50%+background-repeat: no-repeat（确保不平铺干扰判断）
left top / center bottom 这类关键词组合怎么算坐标？
关键词本质是快捷写法，对应固定数值：比如 left = 0%，center = 50%，right = 100%；同理 top/center/bottom 对应垂直方向的 0%/50%/100%。但注意：两个关键词必须一横一纵，顺序可换（top left 和 left top 等价），浏览器自动按方向归位。
容易踩的坑：
-
background-position: center只设一个值，默认补全为center center—— 没问题；但background-position: top center就不能写成center top（虽然多数浏览器容错，但 CSS 规范要求第一个是水平，第二个是垂直） - 混用关键词和数值（如
left 20px）时，left锁定水平起点为 0%，再偏移 20px；不是“以左边缘为基准往右挪 20px”那么简单，它仍受背景图自身锚点影响 - IE8 及更早版本不支持双关键词写法，只认单值或数值对，需降级处理
用 px 做 background-position 为什么有时“动不了”？
直接写 background-position: 10px 20px 看似明确，但实际位移起点是背景图左上角 —— 如果背景图本身有空白边、被裁剪过、或用了 background-size: cover，那这个“左上角”可能早已不在你肉眼所见区域里。
典型场景：雪碧图（sprite）定位图标，每个图标 32×32，间隔 4px，第 2 行第 3 列的图标起始位置应该是 -96px -36px（每列宽 32+4=36，每行高同理）。
- 单位必须显式写出（
10px不可省略为10），否则会被忽略 - 负值合法且常用，表示“把图往左/往上拉进来”，不是错误
- 若同时设了
background-size（如contain），background-position的 px 值仍按原始图尺寸计算，不是缩放后的尺寸 —— 这点极易误判
background-position 在 background shorthand 里怎么写才不覆盖？
写 background: url(x.jpg) no-repeat 10px 20px; 没问题，但若漏掉某个子属性（比如忘了写 no-repeat），整个声明会重置所有 background 子属性为初始值 —— 很可能意外开启平铺，或者恢复默认的 0% 0% 位置。
更隐蔽的问题：shorthand 中位置值必须紧挨在图像 URL 后面，且不能拆开。例如下面这行是错的：
background: url(x.jpg) 10px 20px no-repeat;
正确顺序是：background: url(x.jpg) no-repeat 10px 20px;
- 推荐拆开写：单独用
background-image、background-position等，避免 shorthand 覆盖风险 - 如果必须用 shorthand，记住固定结构：[image] [repeat] [position] [attachment] [origin] [clip] [size]
- 现代项目中，CSS 自定义属性可用来管理位置值，比如
--icon-x: -64px; --icon-y: -32px;，再写background-position: var(--icon-x) var(--icon-y);，方便复用和调试
真正难的不是记住 center 对应 50%，而是当你调好一个 background-position，换张图、换个容器宽高、加个 background-size，它就偏了 —— 所有值都依赖上下文，没有绝对“固定”的像素位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
