css - 使用 background-position 时防止 chrome 切断 body 上的背景图像

Question

我在这个页面的 body 标签上有一个纸飞机的背景图片: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%;
}

Answer 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%;
}