引导加载程序时如何使背景透明

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出现。