如果只是背景的问题，你可以使用color: rgba(0,0,0,0)来获得一个透明的背景，如果你还需要使div中的文本透明，我认为你唯一能做的就是从父div中移出div，然后调整定位来获得你想要的视觉效果。

opacity属性确实会影响子元素，因为它们将从父元素继承相同的透明度（CSS中的一个原则）。
这可以通过rgba函数和background-color属性来解决：

.inherited {
  background-color: rgb(0, 255, 0);
  opacity: 0.2;
}

.just-parent {
  background-color: rgba(0, 255, 0, 0.2);
}

p {
  background-color: royalblue;
}

<div class="inherited">
  Children affected
  <p>A test</p>
</div>

<div class="just-parent">
  Children not affected
  <p>A test</p>
</div>

实际上，div的背景默认为透明（？）：

.x {
  width: 50%;
  height: 100px;
  position: relative;
  background-color: red;
}

.y {
  left: 50px;
  top: 50px;
  position: absolute;
  width: 50%;
  height: 100px;
  border: 1px solid green;
}

<div class="x">div x</div>
<div class="y">div y (in front of div x)</div>