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

Question

我想建立一個包含子div的父div。父樣式是width:100vw;height:100vh;position:fixed;background-color:rgb(000/0.25);backdrop-filter:blur(2px);z-index:8888;top:0;left:0;子樣式是background-color:transparent;width:200px;height:200

P粉043432210 · Answer

--編輯--

如果問題是如何還原子 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;
}