background-position不能直接引用CSS变量，因变量值若无单位（如--x: 50）会被浏览器忽略；必须用calc()补单位并运算，如calc(var(--x) * 1%)，兼顾兼容性与动态控制。
直接用 var() 替换 background-position 中的数值即可，但必须搭配 calc() 才能生效；纯 var(--x) var(--y) 会因单位缺失而失效。
为什么 background-position 不能直接引用 CSS 变量？
CSS 变量本身不带单位，而 background-position 的值（如 50% 20px）是“带单位的长度或百分比”。浏览器解析时，var(--offset) 若未显式声明单位（比如 --offset: 20），会被当作无单位数字，导致整个声明被忽略。
- 错误写法：
background-position: var(--x) var(--y);→ 即使--x: 50%、--y: 20px，部分旧版 Safari 或某些 WebView 仍可能拒识 - 正确前提：变量值必须含单位，且浏览器需支持该单位在
background-position中的使用（IE 完全不支持） - 更稳妥路径：统一用
calc()做“单位兜底”，把变量当纯数字参与计算
用 calc() + var() 实现可动画的动态偏移
这是目前最兼容、最可控的方式。变量存纯数字，calc() 负责补单位并参与运算，还能和 @keyframes 配合做平滑位移动画。
- 定义变量（无单位）：
:root { --bg-x: 0; --bg-y: 0; } - 应用位置：
background-position: calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1px); - 动画控制（例如横向滚动）：
@keyframes slideX { from { --bg-x: 0; } to { --bg-x: 100; } }再配合transition: --bg-x 2s ease;（注意：需在元素上声明transition作用于自定义属性） - 注意：Chrome/Firefox 支持对 CSS 变量的
transition，Safari 15.4+ 才稳定；低于此版本需降级为 JS 控制style.setProperty
结合媒体查询与主题切换的实战场景
比如深色模式下让背景图右下角微调，或响应式断点中改变锚点位置——这些都不必写多套规则，靠变量驱动即可。
立即学习“前端免费学习笔记（深入）”；
- 基础定位：
.hero { background-position: calc(100% - var(--right-gap)) calc(100% - var(--bottom-gap)); } - 深色模式覆盖：
.dark-mode { --right-gap: 32px; --bottom-gap: 24px; } - 移动端适配：
@media (max-width: 768px) { :root { --right-gap: 16px; --bottom-gap: 12px; } } - 关键点：所有偏移都基于容器尺寸计算，
calc(100% - ...)比四值语法（right X bottom Y）更易与变量联动，且兼容性更好（IE9+ 支持calc在background-position中）
真正容易被卡住的地方不是语法，而是忘记 background-origin 的默认行为——它让 100% 计算基准落在 padding-box 上，如果你的容器有 padding，视觉偏移会比预期多出那部分距离。动手前先确认你是在 content-box 还是 padding-box 里做减法。
