CSS设置多div拼接同一张背景图时background-position出现莫名偏移如何解决？

想要将三块使用同一张背景图的面板并排摆放，营造出整体为单张完整图片的视觉效果。当前版本所有尺寸均为固定值：外层容器.frame宽度为900px，每块.panel宽度为300px。为了实现拼接的视觉效果，对每块面板的background-position做了贴合设置，但实际运行时出现了无法解释的11px宽度偏移，已引入CSS重置样式，排查不出原因。

效果展示 #

HTML源码 #

<main class="frame">
  <div class="panel panel--one"></div>
  <div class="panel panel--two"></div>
  <div class="panel panel--three"></div>
</main>

CSS样式 #

.frame {
    background-color: #0080e2;
    background-size: 900px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    width: 900px;
    height: 500px;
    display: flex;
}
.panel {
  width: 300px;
  height: 500px;
  background-image: url("../images/image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.panel--two {
  background-position: -300px;
}

.panel--three {
  background-position: -600px;
}

• 核心问题是.panel设置了background-size: cover：cover属性会自动按比例缩放背景图直到完全覆盖容器，不会严格按照你预期的900px总宽度渲染，一旦原图宽高比和300px*500px的面板比例不匹配，背景图实际渲染宽度就会偏离900px，你预设的-300px、-600px偏移量自然就会出现错位。
• 没有明确background-origin属性：该属性默认值为padding-box，如果面板存在内边距、边框，就会导致背景偏移的计算基准变化，就算当前未设置相关属性，部分浏览器的默认样式也可能带来微小偏差。
• flex布局的间隙没有明确关闭：虽然flex默认gap为0，但若有全局样式继承了间隙设置，也会导致面板之间出现空隙，总宽度超过900px引发错位。

1. 把所有.panel的background-size从cover改为900px auto，强制背景图总宽度和外层容器保持一致，从根源上避免缩放带来的偏移：

.panel {
  /* 其他原有属性不变 */
  background-size: 900px auto;
}

2. 明确背景偏移的计算基准，给.panel加上background-origin: border-box，确保偏移量从面板边框最外侧开始计算：

.panel {
  /* 其他原有属性不变 */
  background-origin: border-box;
}

3. 给外层.frame明确设置gap: 0，关掉flex布局的间隙，避免样式继承带来的意外空隙：

.frame {
  /* 其他原有属性不变 */
  gap: 0;
}

4. 可选优化：用CSS变量简化偏移写法，后续调整面板宽度不用逐个修改偏移值：

.panel {
  --offset: calc(var(--panel-index, 0) * -300px);
  background-position-x: var(--offset);
}
.panel--one { --panel-index: 0; }
.panel--two { --panel-index: 1; }
.panel--three { --panel-index: 2; }

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