我怎样才能在其他所有元素前面添加透明的<div>

2024-05-10 • 问答

因此，我试图创建一个在页面顶部为alpha：0的div，并使用动画使网站的其余部分“变暗”，并在顶部弹出一个窗口。

从理论上讲，这听起来很容易做到，但我一直摆弄绝对/相对/固定的位置来尝试实现这一目标，但没有成功。

我现在拥有的是元素内的元素，我的问题是即使使用z-index我也无法将其带到网页的后面。

在任何其他元素上具有透明div的最简单解决方案是什么？（弹出窗口除外）

此刻我的代码：

<body>
    <div position="fixed" style="background-color: rgba(0,1); border: 1px solid green; height: 100vh; width: 100vw; top:0; z-index: 10">
        <div position="absolute" class="header" id="header" style="border:1px solid green; background-color: white; height:30px; width:250px; top:0; z-index: -1"></div>
    </div>
</body>

将叠加层写在另一个div之下，然后将它们都放在position: absolute;中。如果要覆盖层上方的任何内容，请使用相同的逻辑。在叠加层下方添加另一个div。您也可以在叠加层中添加。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,body {
  height: 100%;
  min-height: 100%;
}

<body>

  <!-- your content -->
  <div class="header" id="header" style="position: absolute;border:1px solid green; background-color: white; height:30px; width:250px;">
  </div>

  <!-- the overlay -->
  <div style="position: absolute; background-color: rgba(0,0.8); border: 1px solid green; height: 100%; width: 100%;">
  </div>

</body>

还要注意，我将position: absolute;设置为样式。顺便说一句，您应该将其再次移动到css文件中：）

在这里，您的代码非常有用：

<body>
    <div style="position: fixed; display: block; z-index: 2;  height: 100vh; width: 100vw; background-color: transparent; top: 0px; left: 0px;"></div>
    <p id="objectInBackground">The text you want to hide</p>
</body>

我怎样才能在其他所有元素前面添加透明的<div>

HELLO_JAVA521 回答：我怎样才能在其他所有元素前面添加透明的<div>

大家都在问