Html 不透明度显示的文本

我正在制作一个动画的wave加载页面，当我的加载程序和加载文本位于wave wrapper div之外时，它们不会出现，但是如果我将它们放在div内，它们会出现，但会显示为它们上面有一个不透明过滤器，我无法用鼠标选择或拖动文本。有什么帮助吗

<div class="waveWrapper waveAnimation">
    
    <div class="centered"><div class="loader"></div></div>
    
  <div class="waveWrapperInner bgMiddle">
    <div class="centered"><div class="loader"></div></div>
    <div class="centered" style="padding-top: 10%"><h4>A carregar as suas mensagens</h4><h4 id="lbl"></h4></div>
    <div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
  </div>
    
  <div class="waveWrapperInner bgBottom">
    <div class="centered"><div class="loader"></div></div>
    <div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
  </div>
</div>

---

您的加载程序正在使用.centered类，该类的z索引为-1，而.bgmided类的z索引为10

由于以.bgmediv为中心的div根据其z索引位于.bgmediv之后，因此当它位于.bgmediv之外时，您无法看到它

如果将.centered类的z索引更改为大于10，则应该能够看到它

另外，当你把它们放在div中时，你看到不透明度过滤器效果的原因是.bgmidel类在你的样式表中被设置为不透明度为0.75

.centered{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
}

.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    background: linear-gradient(0deg, hsla(195, 90%, 27%, 1) 0%, hsla(0, 0%, 100%, 1) 100%, hsla(0, 0%, 100%, 1) 100%);
}

.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}

.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}

.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}