Question

我必须删除页面加载时的白色背景代替它显示2_image.jpg然后将显示该身体图像1_image.jpg。它可能通过css或者可能是脚本将被使用。我试过这个但没有工作

<style>
body {
  background: url("../images/1_image.jpg") #070707; 
  background-color:#070707;
  background-attachment: fixed;
  background-size: cover;
  background-repeat:no-repeat; 
}
.box {
    background:url("../images/2_image.jpg") no-repeat;
    background-size:cover;
    background-position:center; 
    background-attachment: fixed;
    width:100%;
    height:100%;
    position:absolute;
    z-index:9999;
    top:0px;
}
</style>
<div class="box"></div>

Answer 1

这是一个示例方法。

创建2个类，一个是隐藏div。

.hidden{
display:none;
}

第二个显示图像。

.show_image{
position:fixed;top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%;
z-index:100;
background-size: 5ex;
}

您的HTML代码将是

<div class="show_image"></div>
<div class="hidden box"> Your actual content </div>

最初，您的内容将处于隐藏状态，并且将显示加载图像。

完成页面加载后，只需切换隐藏的类。

$('.box').removeClass("hidden");
$('.show_image').addClass("hidden");

这样您的内容就会变得可见，并且加载图片会被隐藏。

如果您需要有关页面加载的任何帮助，请告诉我们。

删除页面上的白色背景加载显示图像代替它

1 个答案: