Question

我试图隐藏身体直到页面加载，但是，当身体的背景图像开始加载时，它会忽略显示：无法为身体设置并显示它。

Body CSS

body {

    background-image: url("../img/backgrounds/authentication/main.jpg");

}

正文HTML：

<body style="display: none;">

Answer 1

如果half元素没有附加<html>，那么文档的background将从background元素取而代之。

默认情况下，<body>元素没有附加<html>。因此，当您设置background时，HTML元素将需要一些背景渲染到屏幕，因此采用 style="display:none;"元素的背景。

一个简单的解决方案是将<body>元素的background-color设置为某种不透明的颜色（即默认的“颜色”）。 Here is a jsfiddle demonstrating this.（只需移除<html>代码中的display: none即可显示图片）

希望这有帮助。：）

Answer 2

在你的html中，将属性hidden提供给正文。

<body hidden>

</body>

另外，请确保您的html正确（所有标签都已正确关闭）并且所有内容都在正文中。

Answer 3

您可以尝试给身体一个高度= 0，然后执行像

这样的onload函数

document.onload=function(){ body.style.height="100%"};

如果你有兴趣，你也可以给jQuery和fadeIn fadeOut函数一个镜头;）

Answer 4

请按照以下步骤操作：“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;
    } 
}

CSS无法隐藏背景

4 个答案: