13

我的网站上有一个关于背景大小的小问题：封面我一直在 Firefox 中对其进行测试，但是当我在谷歌浏览器中加载页面时，我在左侧得到 1px 白色。当我使用 background-position:-1px 时，左边的白色边缘消失了（但后来我把它移到了右边）。有什么办法可以解决这个问题，并且仍然保留封面吗？

我将此应用于我的身体：背景：url（“images/baggrund.jpg”）无重复中心中心固定；背景尺寸：封面

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

提前致谢

编辑：添加截图，顶部来自 Firefox，底部来自 Chrome。

截屏

4

7 回答 7

13

试试这个：

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% 以减少错误）而不是“中心”将解决该问题。

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

于 2013-05-16T06:02:31.280 回答
9

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

于 2013-01-17T10:17:58.243 回答
2

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

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

于 2017-05-15T21:45:01.740 回答
1

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

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

html,body{
  padding:0;
  margin:0;
}
于 2013-01-17T09:57:17.923 回答
1

选择 ：

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

否则，应该这样做（正如@estrar 指出的那样）：如何在 Google Chrome 上修复 1px 边距？

于 2013-04-19T14:54:11.870 回答
1

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

于 2013-08-10T19:37:57.207 回答
0

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

我的问题是我使用的是svg。我咬紧牙关，切换到png。

  /* background: url("/static/images/orgchart-background.svg") no-repeat; */
  background: url("/static/images/orgchart-background.png") no-repeat; 
  background-size: 100% 100%;
于 2018-09-04T00:37:37.840 回答