Question

因此，我要使用以下内容创建一个100vh图像的登录页面，该图像具有褪色的白色叠加层：

#showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('../img/showcase.jpeg');
  background-attachment: fixed;
  height: 100vh;
  position: relative;
  z-index: -2;
}

#showcase:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(#eee, 0.7);
  z-index: -1;
}

<section id="showcase">
  <img id="logo" src="img/logo.png" alt="" />
  <h1 class="display-4 text-center">Test text</h1>
  <a href="#">DO SOMETING</a>
</section>

当我尝试在div的内容中添加按钮或锚标记时，它似乎可以正常工作，但似乎无法单击或突出显示它。 h标签中的文字和图片可以高亮显示

Answer 1

只需从父母中删除z-index:-2，然后将孩子放在较高的z-index

#showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: lightblue;
  height: 100vh;
  position: relative;
  /*  z-index: -2; -- remove  this */
}

#showcase:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}

#showcase * {
  position: relative;
  z-index: 1;
}

<section id="showcase">
  <img id="logo" src="img/logo.png" alt="" />
  <h1 class="display-4 text-center">Test text</h1>
  <a href="#">DO SOMETING</a>
</section>

Answer 2

仅z-index个问题。

#showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../img/showcase.jpeg);
    background-attachment: fixed;
    height: 100vh;
    position: relative;
   /* z-index: -2; Remove this line*/
}

某些元素不受after-伪类使用z-index的影响

2 个答案: