使用背景位置时防止 chrome 切断身体上的背景图像答案

【问题标题】：Prevent chrome cutting off background images on body when using background-position使用背景位置时防止 chrome 切断身体上的背景图像
【发布时间】：2014-05-30 05:26:16
【问题描述】：

我在此页面的正文标签上有一张纸飞机的背景图片：http://cogo.goodfolk.co.nz。它的最尖端被切断 - 如果您调整浏览器窗口的大小，完整的图像会重新弹出。

它只发生在 Chrome 中，并且不一致，如果您有时刷新，或者有时甚至将鼠标悬停在上面，这很好。如果我删除所有背景样式（背景位置和不重复），那么整个图像就在那里 - 但当然没有正确定位。这也发生在我网站的其他页面上（例如http://cogo.goodfolk.co.nz/online-surveying）。

经过几天的调试/搜索，我找不到任何与此问题相关的内容和/或修复它 - 这可能是带有背景位置的 Chrome 错误吗？

有什么想法或解决方法吗？谢谢！

//已编辑// 相关代码粘贴在下面，尽管显然这是非常标准的，所以它一定是网站中的其他东西导致了问题：

.home {
   background: url("../img/airplane.jpg") no-repeat center; 
   background-size: 70%;
   background-position: 10% 98%;
}

【问题讨论】：

我认为它的高亮取决于您的屏幕。我调整了浏览器的大小，然后将其最大化，我仍然看到提示在视口内。我在 1600x900 显示器上。您可能需要听取视口调整大小并针对不同大小对特定背景位置进行硬编码。
无论视口大小如何，我都无法在 Chrome 上重现此问题...
感谢大家查看这个 - 抱歉，您无法重现，这是一个非常微妙的错误。我能够在我测试过的两台 Mac 和一台电脑上重现。无论如何，我已经想出了一个解决办法。还是谢谢！

标签： css google-chrome background-position

【解决方案1】：

背景图像设置为center，因此这是预期行为，具体取决于窗口大小。您可以从以下位置更改此 CSS 声明：

.home {
    background: url("../img/airplane.jpg") no-repeat center;
    background-size: 70%;
}

收件人：

.home {
    background: url("../img/airplane.jpg") no-repeat center top;
    background-size: 70%;
}

这会将图像锚定到屏幕顶部，这意味着它不会剪辑，但这可能不是您要寻找的行为。

更复杂的是，你也有这个，这可能是导致问题的原因。我建议完全删除它：

@media (min-width: 1200px)
.home {
    background-position: 20% -10%;
}

【讨论】：

感谢@graphicdivine 的建议。我不太确定为什么您建议图像顶部被切断是预期的行为 - 很明显它在到达浏览器边缘之前就被切断了，好像有某种边距或封装 div（没有）。我确实尝试了你的建议，但你是对的，他们没有创造出我想要的那种行为。无论如何，谢谢你，幸运的是我找到了解决方法！

【解决方案2】：

感谢所有留下建议的人，幸运的是我找到了解决方法！我设法使背景样式几乎保持不变，并且只是将所有内容都放在了 body 标签上的 :before 伪元素中。如果您有兴趣，可以在 cogo.goodfolk.co.nz 查看更新的代码，或者将其粘贴在这里：

.home {
   position: relative;
   min-height: 860px;
}
.home:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background: url("../img/airplane.jpg") no-repeat center;
   background-size: 70%;
   background-position: 50% 15%;
}

【讨论】：

在您的问题和答案中包含相关代码以供将来参考通常是个好主意，以防将来对网站代码进行修订。
@RebeccaHill 而不是 min-height 到某个特定值。我建议使用min-height: 100vh

【解决方案3】：

将显示设置为“inline-table”。

【讨论】：

请提供更多细节 - 代码的哪一部分需要更改？