子 div 可以覆蓋父樣式並充當門戶嗎？

Question

我想建立一個包含子 div 的父 div。父樣式是

width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  z-index: 8888;
  top: 0;
  left: 0;

子樣式是

background-color: transparent;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;

有沒有辦法讓子元素表現得像一個門戶，其中它所在的區域刪除了父 div 模糊和背景顏色？

tl;博士 看起來像這樣的東西

Answer 1

--編輯--

如果問題是如何還原子 div 中的背景篩選器，您可以使用

backdrop-filter: none;

但是，如果您想要從父級的父級繼承此屬性，則需要在 JavaScript 中執行此動作

element.style.backdropFilter = element.parentNode.parentNode.style.backdropFilter;

---

在 CSS 中執行此操作的三種方法

1 使用相對 div 位置

div : {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  background-clip: text;
  z-index: 8888;
  top: 0;
  left: 0;
}

div div {
  background-color: transparent;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;
}

2個使用ID

#mainID : {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  background-clip: text;
  z-index: 8888;
  top: 0;
  left: 0;
}

#subDivID {
  background-color: transparent;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;
}

3 使用類別

.mainID : {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  background-clip: text;
  z-index: 8888;
  top: 0;
  left: 0;
}

.subDivClass {
  background-color: transparent;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;
}