切换覆盖有半透明部件

Question

一个div我想知道如何为覆盖了一些有用的HTML组件/图像的<div>使<div>：

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

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

Answer 1

（A）使格“无法点击（可达小鼠等）”

这可以通过使用各种CSS positioning elements放置两个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）使格“看起来有点〜0.3f模糊（因为它透明的前景） “

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

#div2 { 
    opacity: .3; 
} 

---

（C）“使效果动态我的意思是使覆盖/被一些事件破获”

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

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

---

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