所以也许这就是我将 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;
}
根据该代码,我可以看到图像将从正文的开头开始,它从居中开始,因此图像将从那里开始,我有不应该在那里的空白;我希望正文中的内容居中,但背景不应该居中,这样它才能以正确的方式适合屏幕。我尝试将我的中心代码转移到容器中,但那没有用。我环顾四周一两个小时,但所有答案都不适合我。知道如何解决这个问题吗?
最佳答案
您是否重置了页面的边距?
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/
关于html - 当 body 始终居中时,如何让单个固定图像适合屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15300662/