子 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;
}