如何通过CSS background-position计算将背景图指定(x,y)点对齐到容器(x',y')坐标

你已经掌握的background-position百分比对齐规则完全正确：

当background-position: X% Y%时，会将背景图上(X% * 自身宽度, Y% * 自身高度)的点，与容器上(X% * 内容区宽度, Y% * 内容区高度)的点对齐。

基于这个规则，可以推导任意自定义对齐点的通用计算公式：
假设需要将背景图上的A%位置，对齐到容器上的B%位置，水平方向的background-position-x百分比值为：

posX% = (B% * 容器宽度 - A% * 背景图宽度) / (容器宽度 - 背景图宽度)

垂直方向同理：

posY% = (B% * 容器高度 - A% * 背景图高度) / (容器高度 - 背景图高度)

background-origin仅控制背景定位的参考区域（边框/内边距/内容区），不会改变对齐点的计算逻辑，因此无法实现自定义基准点对齐，和你之前的判断一致。 #

你的需求是：

• 背景图对齐点：自身(50%, 50%)中点 → A% = 50
• 容器对齐点：自身(0, 0)左上角 → B% = 0

代入通用公式化简后得到：

posX% = (-50% * 背景图宽度) / (容器宽度 - 背景图宽度)
posY% = (-50% * 背景图高度) / (容器高度 - 背景图高度)

background-position支持负百分比值，符合CSS 2.1规范，所有现代浏览器均兼容。 #

你给出的示例参数：

• 容器：宽400px、高300px
• 示例背景图：默认尺寸200px * 200px

代入计算：

posX% = (-0.5 * 200) / (400 - 200) = -100 / 200 = -50%
posY% = (-0.5 * 200) / (300 - 200) = -100 / 100 = -100%

最终CSS代码：

.foo {
  margin: 0 auto;
  width: 400px;
  height: 300px;
  background: url('your-background-image.jpg') no-repeat -50% -100%, blue;
}

效果验证：背景图左上角会偏移到容器左上角外100px(水平)、100px(垂直)的位置，刚好让背景图中点与容器左上角重合。 #

如果需要更换不同尺寸的背景图、不想手动计算百分比，可以搭配CSS变量实现自动计算，仅需传入背景图的实际宽高即可：

.foo {
  /* 替换为背景图实际宽高 */
  --bg-width: 200px;
  --bg-height: 200px;
  margin: 0 auto;
  width: 400px;
  height: 300px;
  background: url('your-background-image.jpg') no-repeat 
    calc( (-1 * var(--bg-width) / 2) / (400px - var(--bg-width)) * 100% )
    calc( (-1 * var(--bg-height) / 2) / (300px - var(--bg-height)) * 100% ),
  blue;
}

更换背景图时仅需修改两个CSS变量，无需手动换算百分比。

特殊情况处理 #

如果背景图的宽/高与容器的宽/高相等，公式分母为0，百分比偏移会失效，此时直接使用负px值即可：

/* 例：背景图宽度等于容器宽度400px，直接取背景图宽度的一半作为负偏移 */
background: url('your-background-image.jpg') no-repeat -200px -100px, blue;

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