html - CSS 加载器和覆盖定位 : z-index Not Working

Question

我正在尝试使用 CSS 实现预加载，但我在 CSS 加载器相对于背景叠加层的定位方面遇到了问题。我希望叠加层以设置的不透明度覆盖 100% 的 body ，并且加载器位于叠加层前面，不应用不透明度值。我实际得到的是叠加层和加载程序都以降低的不透明度显示。我试过设置 z-index 但这似乎对加载器的位置没有任何影响。任何人都知道问题可能是什么？

谢谢..

HTML 使用 Bootstrap 框架。

<div class="container-fluid">
<div id=overlay>
    <div class="row">
        <div class="col-md-12" id="spinner">

            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <h1 class="text-center space">Loading</h1>
                </div>
                <div class="col-md-4">
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <div class="spinner2">
                      <div class="rect1"></div>
                      <div class="rect2"></div>
                      <div class="rect3"></div>
                      <div class="rect4"></div>
                      <div class="rect5"></div>
                    </div>
                </div>
                <div class="col-md-4">
                </div>
            </div>

        </div>
    </div>
    </div>
</div>

CSS - #spinner 设置加载器的位置。 #overlay 设置 100% 屏幕覆盖，降低不透明度和 z-index: -1;.

#spinner{
    position: relative;
    z-index:999; 
}

#overlay {
    opacity:0.1; 
    height: 100%;
    width: 100%;
    position:fixed;
    z-index: -1;
    left:0;
    top:0;  
}

Spinner CSS:构建加载器的 CSS。

.spinner2 {
  margin: 10px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner2 > div {
  background-color: #004a88;
  height: 100%;
  width: 6px;
  display: inline-block;


  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner2 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner2 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner2 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner2 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

Answer 1

这里的问题似乎是微调器从 #overlay 继承了不透明度 - 是否有任何理由认为微调器需要成为后代？

我已将您的 HTML 更改为:

<div class="container-fluid">

    <div id=overlay>
    </div>

    <div class="row">
        <div class="col-md-12" id="spinner">
            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <h1 class="text-center space">Loading</h1>
                </div>
                <div class="col-md-4">
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <div class="spinner2">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </div>
    </div>

</div>

这似乎可以解决问题 - jsfiddle here .