css - 这个加载器如何在黑色背景中

Question

我试图在屏幕中心的边框半径为 50px 的黑色背景中显示加载器，它已经是这样了。我该怎么做 ？我已将其固定位置，以便即使滚动页面也能保持在同一位置。我唯一需要的是 Logo 应该位于叠加层上方的黑色背景内。

从四面看，它应该在黑色背景的中间。

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: 220px;
  z-index: 999999999999 !important;
}
.loader img:before{
  background: color: black;
  border-radius: 100px;
}
.overlay {
  position: fixed;
   z-index: 99999999 !important;
    width: 100%;
   height: 100%;
   top: 0;
  left: 0;
   right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.3;
  z-index: 6;
  border-radius: 0px;
}
img {
  width: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div>
    <div class="overlay"></div><div class="loader text-center"><img src="https://i.imgur.com/5fcCZ8G.gif"></div>
</div>

Answer 1

移除覆盖 div 的 opacity 和 background: color: 不受支持。使用 背景颜色:引用:https://cssreference.io/property/background-color/

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: 220px;
  z-index: 999999999999 !important;
}
.loader img:before{
  background-color: black;
  border-radius: 100px;
}
.overlay {
  position: fixed;
   z-index: 99999999 !important;
    width: 100%;
   height: 100%;
   top: 0;
  left: 0;
   right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 6;
  border-radius: 0px;
}
img {
  width: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div>
    <div class="overlay"></div><div class="loader text-center"><img src="https://i.imgur.com/5fcCZ8G.gif"></div>
</div>