如何在引導加載程序時使背景透明

Question

我想在API返回結果時進行引導加載映像。我怎樣才能使背景透明？

下面是HTML標記和CSS：

<div class="loader" ng-hide="data.length > 0"></div> 
 

 

 
<style> 
 
.loader { 
 
    border: 16px solid #D4D4D4; 
 
    border-radius: 50%; 
 
    border-top: 16px solid #3498db; 
 
    width: 120px; 
 
    height: 120px; 
 
    position: fixed; 
 
    top:100px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    z-index: 99999999; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    animation: spin 2s linear infinite; 
 
} 
 
@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
} 
 
</style>

Answer 1

添加背景顏色：透明.loader

<div class="loader" ng-hide="data.length > 0"></div> 
 

 

 
<style> 
 
.loader { 
 
    border: 16px solid #D4D4D4; 
 
    border-radius: 50%; 
 
    border-top: 16px solid #3498db; 
 
    width: 120px; 
 
    background-color: transparent; 
 
    height: 120px; 
 
    position: fixed; 
 
    top:100px; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    z-index: 99999999; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    animation: spin 2s linear infinite; 
 
} 
 
@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
} 
 
</style>

Answer 2

您可以隨時添加尺寸較小的一個div在頁面加載，並使它成爲一個淺灰色，並把不透明度降低，如：

#div1{ 
 
    width:500px; 
 
    height:500px; 
 
    background-image: url("https://images3.alphacoders.com/823/82317.jpg"); 
 
} 
 

 
#div2{ 
 
    width:200px; 
 
    height:200px; 
 
    margin: 0 auto; 
 
    background-color:gray; 
 
    opacity:.7; 
 
    position:absolute; 
 
    top:150px; 
 
    left:150px; 
 
}

<div id="div1"> 
 
    <div id="div2"> 
 
    </div> 
 
</div>

然後，您可以將內部的裝載機更小的div，並在API獲取數據時顯示該div。