html - 使用转换的背景文本的 CSS 透明度问题

Question

我在其他一些包含文本的 div (.textDisplay) 前面有一个彩色半透明 div (.box)。这些背景 div 之一(左侧)显示正确，文本由于透明 div 覆盖在其上而变淡。但是，另一个根本不会褪色。我希望两个 div 都像左边那样显示。

编辑:我无法修改 HTML 的结构(它是由 Elm 以嵌套方式生成的)。有没有办法仅使用 CSS 来做到这一点？

编辑 2: 由于 transform 属性，这是一个堆栈上下文问题。有关详细信息，请参阅我的回答。

.textDisplay {
  height: 100%;
  width: 100%;
  text-align: center;
}

.box {
  width: 200px;
  padding: 20px;
  background-color: #8CA8DA;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 20px;
  transform: translateY(-50%);
  opacity: 0.8;
}

.behind {
  position: absolute;
  transform: translate(-50%, -50%);
}

<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;">
  <div class="content">
    <div>
      <div class="textDisplay">Test Text 0</div>
      <div class="box" style="z-index: 100;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus.
      </div>
    </div>
  </div>
</div>
<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;">
  <div class="content">
    <div>
      <div class="textDisplay">Test Text 1</div>
    </div>
  </div>
</div>

Answer 1

像这样？

.textDisplay {
  height: 100%;
  width: 100%;
  text-align: center;
}

.box {
  width: 200px;
  padding: 20px;
  background-color: #8CA8DA;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 20px;
  transform: translateY(-50%);
  opacity: 0.8;
}

.behind {
  position: absolute;
  transform: translate(-50%, -50%);
}

<div class="behind" style="left: 350px; top: 150px; width: 127px; height: 127px;">
  <div class="content">
    <div>
      <div class="textDisplay">Test Text 1</div>
    </div>
  </div>
</div>
<div class="behind" style="left: 100px; top: 100px; width: 127px; height: 127px;">
  <div class="content">
    <div>
      <div class="textDisplay">Test Text 0</div>
      <div class="box" style="z-index: 100;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie ornare ex et cursus. Donec nibh urna, bibendum nec molestie sed, condimentum ut lacus.
      </div>
    </div>
  </div>
</div>