html - 当 body 始终居中时，如何让单个固定图像适合屏幕

Question

所以也许这就是我将 body 居中的方式，因为我将其显示为 html 中的居中表格。

html {
    display: table;
    margin: auto;
}

body {
    width:100%;
    display: table-cell;
    vertical-align: middle;
}

#background{
    width:100%;
    height:100%;
    position:fixed;
    background-image:url('image.jpg'); 
    background-repeat: no-repeat;
    background-size:cover;
}

根据该代码，我可以看到图像将从正文的开头开始，它从居中开始，因此图像将从那里开始，我有不应该在那里的空白；我希望正文中的内容居中，但背景不应该居中，这样它才能以正确的方式适合屏幕。我尝试将我的中心代码转移到容器中，但那没有用。我环顾四周一两个小时，但所有答案都不适合我。知道如何解决这个问题吗？

Answer 1

您是否重置了页面的边距？

html {
  margin: 0;
  padding: 0;
 }

body {
  margin: 0;
  padding: 0;
 }

此外，如果您想要的结果是全屏背景，为什么不这样做:

body {
  background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
background-size: cover;
}

检查此链接以了解替代方法:http://css-tricks.com/perfect-full-page-background-image/