我试图隐藏正文，直到页面加载完毕，但是，当正文的背景图像开始加载时，它会忽略显示：没有我为正文设置并显示它。
正文 CSS
body {
background-image: url("../img/backgrounds/authentication/main.jpg");
}
正文：
<body style="display: none;">
如果<html>元素没有附加background，则文档的background将从<body>元素中获取。
默认情况下，<html> 元素没有附加任何background。因此，当您设置style="display:none;"时，HTML 元素将需要一些背景才能呈现到屏幕上，因此将采用 <body> 元素的背景。
一个简单的解决方案是将<html>元素的background-color设置为某种不透明的颜色(即默认的"颜色">(。这是一个演示这一点的 jsfiddle。(只需删除html代码中的display: none即可显示图像(
希望这有帮助。 :)
在你的 html 中，给正文属性hidden。
<body hidden>
</body>
另外，请确保您的html是正确的(所有标签都已正确关闭(，并且所有内容都在正文中。
您可以尝试给身体一个高度= 0，然后执行加载功能，例如
document.onload=function(){ body.style.height="100%"};
如果你有兴趣，你也可以给jQuery和fadeIn fadeOut函数一个镜头;)
遵循这个："https://www.sitepoint.com/community/t/load-background-image-after-content-loads/240343/3"和"https://varvy.com/pagespeed/defer-images.html"可能是这将解决您的问题。
否则，只需在您的 css 中添加以下内容即可。
body {
background-color: #eee;
}
body:after {
content:"";
background: url(http://yourimage-url.jpg ) no-repeat 0 0;
background-size: cover;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
z-index:-1;
animation:bgFade 2s 2s forwards;
}
@keyframes bgFade {
from {
opacity:0;
}
to {
opacity:1;
}
}