技术问询：如何将background-size与background-position相对值转为绝对PX值

没问题，我来一步步帮你把这些相对值转换成像素绝对值，用你提供的示例数据拆解会更直观：

一、先处理 background-size: auto 105% 的转换 #

当 background-size 是 auto + 百分比 的组合时，规则很明确：

• 百分比是相对于容器（你的div）的对应轴尺寸计算的（这里的105%对应Y轴，也就是div的高度）
• auto 会严格保持背景图的原始宽高比，自动算出对应轴的显示尺寸

用你的示例数据计算：

1. 先算背景图的显示高度：
   div高度 × 百分比 = 100px × 1.05 = 105px
2. 再算背景图的显示宽度（保持原图宽高比）：
   原图宽高比 = 400px / 280px = 10/7
   所以宽度 = 背景图显示高度 × 宽高比 = 105px × (10/7) = 150px

最终背景图的显示尺寸是：150px × 105px

二、再处理 background-position: 20% 12% 的转换 #

背景位置百分比的核心逻辑是：背景图的百分比位置点，与容器的百分比位置点对齐。转换成绝对像素偏移的公式是：

轴偏移量 = (容器轴尺寸 - 背景图显示轴尺寸) × 百分比

用示例数据计算：

X轴偏移（20%）： #

(div宽度 - 背景图显示宽度) × 20% = (200px - 150px) × 0.2 = 10px
这意味着背景图相对于容器左上角，X轴方向偏移了10px（容器显示的是背景图从X=10px开始的区域）

Y轴偏移（12%）： #

(div高度 - 背景图显示高度) × 12% = (100px - 105px) × 0.12 = -0.6px
负数表示背景图在Y轴方向向上偏移了0.6px（因为背景图显示高度比容器高，需要向上偏移才能让两者的12%位置对齐）

最终背景图的绝对偏移量是：X: 10px，Y: -0.6px

内容的提问来源于stack exchange，提问作者nick