CSS透明块通过黑暗的父母

Question

我有两个绝对的方块。一个在底部，与整个屏幕重叠，另一个是他的孩子，在其顶部。我需要父母不要与孩子重叠，以便在孩子所在的地方有一个完全透明的区域。

现在： 我需要这个 有什么想法吗？

<div className="helper">
    sdsad
    <div className="test"></div>
  </div>



 .helper {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  z-index: 50;
}

.test {
  position: absolute;
  left: 50%;
  top: 0;
  border-radius: 50% 0 0 50%;
  background-color:rgba(255,255,255,0.5);
  opacity: .3;
  height: 100%;
  width: 50%;
}