如何在降低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>

请参阅此。我使用了另一个窗口图像。我认为您需要更改图像。