如何解决如何在降低z-index值之前先增加z-index值
我正在建立一个网站,该网站将背景图片后面的gif图像用于分层背景。
我遇到的问题是,当我导航到Web应用程序中的新页面时,gif(z-index值较低的gif)在进入页面后会闪烁一毫秒,然后背景图片会加载到顶部它的。因此,就像背景gif一样,它变成了背景图片,直到真正的背景图片加载到其顶部为止。
了解我的意思的最简单方法是尝试演示jsfiddle,如果按红色框转到下一页,然后使用浏览器后退按钮返回上一页,则会看到闪光灯。有办法摆脱这种情况吗?
JSfiddle演示 https://jsfiddle.net/4rypj8we/1/
这也是代码
.bg {
z-index: -100;
padding: 0;
top: 0;
}
.bg img {
z-index: -10;
min-height: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#gif {
z-index: -15;
}
<div class="bg">
<img
id="plain"
src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2F416-4161308_window-transparent-background-window.png?v=1601816253247"
/>
<img
id="gif"
src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2Fgiffram.gif?v=1601804252711"
/>
</div>
<a id="next" href="90.html"> NEXT PAGE </a>
希望有人可以提供帮助:)
解决方法
我不知道此解决方案是否符合您的要求,但是您可以使用gif加载,直到所有图像加载完毕。设置完成后,将显示实际页面。
为此,在html正文中添加div标签:
<div class="loading"></div>
在样式表(.css)中:
.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/loading.gif) 50% 50% no-repeat rgb(255,255,255);
}
最后是一个jQuery:
$(window).on('load',function(){
$(".loading").fadeOut("slow");
})
,
将z-index属性设置为html标记中的属性。因此,在加载html时,标记将带有所需的z-index。
style attribute将覆盖全局设置的任何样式,例如标签或外部样式表中指定的样式。
.bg {
padding: 0;
top: 0;
}
.bg img {
min-height: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#gif {
z-index: -15;
}
<div class="bg" style="z-index: -100;">
<img
id="plain"
src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2F416-4161308_window-transparent-background-window.png?v=1601816253247"
style="z-index: -10;"/>
<img
id="gif"
src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2Fgiffram.gif?v=1601804252711"
style="z-index: -15;"/>
</div>
<a id="next" href="90.html"> NEXT PAGE </a>
,
.bg {
z-index: -100;
padding: 0;
top: 0;
}
.bg img {
z-index: -10;
min-height: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#gif {
z-index: -15;
}
<div class="bg">
<img
id="plain"
src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2F416-4161308_window-transparent-background-window.png?v=1601816253247"
/>
<img
id="gif"
src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2Fgiffram.gif?v=1601804252711"
/>
</div>
<a id="next" href="90.html"> NEXT PAGE </a>
.bg {
z-index: -100;
padding: 0;
top: 0;
}
.bg img {
z-index: -10;
width: 598px;
height: 340px;
position: fixed;
top: 0;
left: 0;
}
#gif {
z-index: -15;
width: 545px;
top: 44px;
left: 29px;
height: 401px !important;
}
<div class="bg">
<img id="plain" src="https://www.pngarts.com/files/4/Window-Download-Transparent-PNG-Image.png" />
<img width="400px" id="gif" src="https://cdn.glitch.com/a65b2bac-6bb8-4ddd-a2b6-a4fb23492184%2Fgiffram.gif?v=1601804252711" />
</div>
<a id="next" href="90.html"> NEXT PAGE </a>
请参阅此。我使用了另一个窗口图像。我认为您需要更改图像。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。