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，并将其设置为浅灰色并将不透明度设置为：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

然后，您可以将加载程序放在较小的div中，并在API获取数据时显示该div。

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

2 个答案: