html - z-index 低于我的主容器的固定视频在页面加载时很快显示

Question

我有两个部分。一个部分位于另一个部分之上，z-index 为 1。

但是，问题是在页面加载/刷新时，其他部分下的部分会显示一小段时间。

我试过更改我的 CSS 在头部的位置，以便它首先加载。我什至将 z-index 行放在 CSS 文件的最顶部。

 <section class="full-grid" id="section-1"></section>
 <div id="trigger" class="fixer"></div>
 <section class="full-grid" id="section-1"></section>

 #section-1 {
  z-index: 1;
  max-width: 100vw;
  overflow: hidden;
  height: 100vh;
  background-image: url("img/page-1");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0vh;
}

.fixer {
 height: 100vh;
 width: 100vw;
 position: relative;
 top: 100vh;
}

#section-2 {
 max-width: 100vw;
 overflow: hidden;
 height: 100vh;
 background-repeat: no-repeat;
 background-size: cover;
 position: fixed;
 top: 0;
}

我希望元素不会在加载时闪烁。但它确实会在加载时闪烁。

Answer 1

您的 HTML 标记中有错字。这两个部分的 ID 都是 section-1。

闪烁的原因可能是因为您正在加载图像作为第 1 部分的背景，所以在加载此图像之前，您会在它后面短暂地看到另一个部分。尝试将第 1 部分的背景颜色设置为白色或页面的任何背景颜色。

在下面的代码片段中，我用两张图片演示了这一点，第 1 部分有一只猫，第 2 部分有一只狗。你应该只在加载时看到猫。

#section-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #fff;
  background-image: url("https://source.unsplash.com/featured/?cat");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.fixer {
  height: 100%;
  width: 100%;
  position: relative;
  top: 100vh;
}

#section-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background-image: url("https://source.unsplash.com/featured/?dog");
  background-repeat: no-repeat;
  background-size: cover;
}

<section class="full-grid" id="section-1"></section>
 <div id="trigger" class="fixer"></div>
<section class="full-grid" id="section-2"></section>