为什么图像的背景位置会有偏移？答案

【问题标题】：Why is there an offset in the background position of an image?为什么图像的背景位置会有偏移？
【发布时间】：2021-10-02 12:39:48
【问题描述】：

我想并排排列三个图像面板，每个面板都具有相同的背景图像，以给人一种它是单个图像的印象。在这个原始版本中，所有尺寸都是固定的。框架为 900 像素宽，每个面板为 300 像素宽。对于视错觉，背景图像的位置每个都是紧密拟合的。但它不起作用。有一个我无法解释的偏移量。偏移量为 11 像素宽。有人有建议吗？提前致谢

看起来是这样的 来源

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

样式除了这里发布的 css，我还使用了来自 meyerweb.com 的重置。

.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;
}

【问题讨论】：

可以上传和分享原图吗？在我选择的随机图像上似乎没有边框
这是原始图像（我将其编辑为 900 像素宽度）：unsplash.com/photos/FSbgF7PpUio
所以它是右边的边界是吗？从上面的图像中，不清楚边框是图像周围的黑色还是右侧较亮的蓝色条带......
我将它命名为边框，但基本上它是一个偏移量。对不起。
您裁剪图像了吗？实际大小为 1332 x 749，因此 900 将是 506.08，而不是 900 x 500，这可能会导致偏移。尝试删除“宽度：500px；”从框架

标签： html css background-image background-position

【解决方案1】：

尝试添加 "border: 0px" ，一些浏览器显示默认边框。即使您不在“检查模式”下，您是否也看到了边框？

【讨论】：

谢谢@Thomas_krk，但不幸的是它并没有改变任何东西。
@Oliver，您可以尝试将border:0 应用到body 吗？在计算的样式中，您会注意到它的值是 8px。
@Philippe - 我想你的意思是 8px 的边距？我试过了，不幸的是你的提示没有结果

【解决方案2】：

这是由于 body 标签。正文标签的边距为 8px。你可以把它放在你的css中。

body{
  margin: 0;
}

【讨论】：

谢谢，除了这里发布的css，我使用了来自meyerweb.com的重置