切換半透明組件覆蓋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鏈接，並編寫最適合您要嘗試完成的代碼。