用半透明组件切换覆盖div

Question

我想知道如何使用一些有用的HTML组件/图片覆盖<div>来制作<div>：

• A）不可点击（鼠标等无法访问）
• B）看一下〜0.3f模糊（因为前景透明）
• C）使效果动态我的意思是让<div>被某些人覆盖/揭露 事件？

所以我的问题是：用HTML，CSS和Javascript制作前面提到的效果的最佳方法是什么？

Answer 1

（A）使div“Unclickable（鼠标等无法访问）”

这可以通过使用各种CSS positioning elements将两个div放在完全相同的位置来实现。然后将一个div叠加在另一个div之上，使用z-index（具有较高z-index的元素将堆叠在具有较低z-index的元素的顶部。例如：

HTML：

<div id="div1">
    <a href="#">Link</a>
</div>
<div id="div2"></div>

CSS：

#div1, #div2 {
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    position: fixed;
}

#div2 {
    z-index: 1;
}

---

（B）使div“看起来有点〜0.3f模糊（因为前景透明）”

为此，您将使用CSS opacity。例如：

#div2 {
    opacity: .3;
}

---

（C）“让效果动态我的意思是让某些事件覆盖/揭开。”

您可以使用Javascript完成此操作。最简单的方法可能是使用document.getElementById将display:none添加到要删除的div中。

<script>
  document.getElementById('div2').style.display = 'none';
</script>

---

注意：这些不是完成此任务的唯一方法。我只是想给你一个启动点。我建议查看我发布的MDN链接，并编写最适合您特别想要完成的代码。