CSS加載器和疊加層定位：z-index不工作

我想實現一個使用CSS預加載，但即時通訊相對於背景疊加定位CSS加載器時遇到問題。我希望覆蓋層能夠以不透明度覆蓋全身100％的身體，並且可以將加載器放置在覆蓋層前面，而不會產生不透明度值。我實際得到的是疊加層和加載程序都顯示不透明度降低。我曾嘗試設置z-index，但這似乎沒有任何區別於裝載機的位置。任何人都有任何想法可能是什麼問題？CSS加載器和疊加層定位：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; 
}

微調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); 
    } 
}

來源

2016-12-09 ballbern

'＃overlay'的哪些部分是您試圖將不透明度應用於？（背景？文字？） – haxxxton

中毒嚴重...？ – Vikrant

@haxxxton我想疊加適用於身體。我希望裝載程序處於活動狀態時背景變得模糊。 – ballbern

這裏的問題似乎是在紡紗從#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。

來源

2016-12-09 13:01:34

CSS加載器和疊加層定位：z-index不工作

回答

相關問題