绝对真实的居中背景图像

Question

oI有一个网站，在这个网站上，居中的背景图片在主页动画中起着至关重要的作用。

背景居中，直到浏览器窗口不能适应网站的宽度，在这一点上，背景类左对齐。

这是我的身体代码：

body {
line-height:1;
margin:0px auto;
padding:0px;
background:#90a830 url(img/bg.png) no-repeat center top;
}

图像弹出窗口从bg图像上的正确位置弹出。试着缩小浏览器窗口，你就会明白我的意思了，bg不对齐了。

谢谢

安迪

Answer 1

将背景左侧设置为50%，将背景边距-左侧设置为0减去背景宽度。这样，它将始终在浏览器窗口的水平中心显示图像的水平中心。

请参阅我的JSbin演示here。我重用了你的图片，所以它与下面的其他示例图片看起来很奇怪！

CSS：

body {
  line-height:1;
padding:0px;
  margin-left:-575px; /* half your background image width */
  background:#90a830 url(http://www.apb-media.co.uk/uploads/background.jpg) 50% top;
}

Answer 2

使用您发布的代码，背景图像将始终在屏幕上居中。在小屏幕上，您希望房屋位于中央屏幕；但只有当房屋位于图像的中心时，才会发生这种情况。因此，如果可能的话，我的建议是在图像的两边都有相同数量的绿草，这样房子就在图像的中心。那么你就不会遇到这个问题了。

如果你不能改变图像，并且房屋的中心在图像中心的左边，比如说240px，你可以用这样的东西在屏幕上居中房屋：

body {
    background: url(bg.png) calc(50% + 240px) 0 no-repeat;
}

或者，如果您不希望图像在较大屏幕上看起来偏离中心，则可以在较小屏幕上使用@media内部规则。