Question

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

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

经过几天的调试/搜索后，我找不到任何涉及此问题和/或修复它的内容 - 是否可能是具有背景位置的Chrome错误？

任何想法或解决方法？谢谢！

// // EDITED 相关代码粘贴在下面，但显然这是非常标准的，因此它必须是导致问题的网站中的其他内容：

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

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

Answer 3

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

使用背景位置时，防止铬切割身体上的背景图像

3 个答案: