切换半透明组件覆盖div

Question

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

• A）不可点击（鼠标等无法访问）
• B）看起来约0.3f模糊（因为它是透明的前景）
• C）使效果动态化我的意思是使<div>被某些事件覆盖/未被覆盖？

所以我的问题是：用HTML，CSS和Javascript产生上述效果的最佳方法是什么？

Answer 1

（A）将div设置为“不可点击（鼠标等无法访问）”

这可以通过使用各种CSS定位元素将两个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链接，并编写最适合您要尝试完成的代码。