背景大小：覆盖，左侧1px空白

Question

我的网站上有一个关于background-size：cover的小问题 我一直在Firefox中测试它，但是当我在谷歌浏览器中加载页面时，我在左侧获得1px白色。当我使用background-position：-1px时，剩下的白边会消失（但我会向右移动）。有没有办法解决这个问题，仍然保留封面？

我将它应用到我的身体：background：url（“images / baggrund.jpg”）无重复中心固定; background-size：cover

我目前无法链接到该网站，但希望我说得足够清楚。

提前致谢

编辑：添加了一个截图，顶部来自firefox，底部来自Chrome。

Answer 1

试试这个：

background: background:url("images/baggrund.jpg") no-repeat 49% center fixed;
background-size: cover;

在chrome中，当你使用“background-size：cover”时，如果background-image的xpos不低于50％，你就会遇到这个问题。

因此，xpos设置为49％（或49.9％以减少错误），而不是“center”将解决该问题。

我的英语不好，我希望你知道我的意思。

Answer 2

这对我不起作用，因为我使用了背景封面，但我只是添加了一条特定于铬的线来将我的背景大小设置为101％，这似乎可以解决它（对于眼睛来说）。 感谢您的投入。

Answer 3

您可以将背景属性应用于body标记，这会导致它覆盖整个页面。

您还可以尝试将以下样式应用于body和html标记：

html,body{
  padding:0;
  margin:0;
}

Answer 4

替代方案：

另一种解决方案是在图像编辑程序中将背景图像的宽度减少或增加1px，如果无关紧要的话。

否则，应该这样做（正如@estrar指出的那样）：How do I fix 1px margin on Google Chrome?

Answer 5

101％可能会正常工作，但您也可以尝试这种细粒度的解决方案：

＆＃13;

＆＃13;

background-size: calc(100% + 1px);

＆＃13;

＆＃13;

＆＃13;

Answer 6

所以我尝试了所有解决方案，但最后一个像素无法正常工作。也尝试了各种大小的图像尺寸。

我的问题是我正在使用 svg 。我咬住子弹，切换到 png 。

  /* background: url("/static/images/orgchart-background.svg") no-repeat; */
  background: url("/static/images/orgchart-background.png") no-repeat; 
  background-size: 100% 100%;

Answer 7

将background-size: cover;更改为background-size: 100%;。为我工作！