Javascript 中间带有图像的CSS加载器

我有我的加载器的下一个代码，在w3school也是一样的

css:

但是如果我放置一个图像，像css动画一样旋转，我希望在加载程序的中心放置一个图像

我在另一个div中使用背景图像不工作

---

这是我的

从

#loader_upload2

中删除

边框

属性，并在那里添加

背景

---

从

#loader_upload2

中删除

Border

属性，并在其中添加

背景


试试这个

<div id="loader_upload2">

      </div>
      <div id="image">

      </div>

演示：
试试这个

<div id="loader_upload2">

      </div>
      <div id="image">

      </div>

演示：
如果我错了，请纠正我。你想要的是图像不应该旋转，应该出现在加载器的正中央。@Manish是的，如果我错了，我想纠正我。你想要的是图像不应该旋转，应该出现在加载器右侧的中心。@Manish是的，我想要这个
<div id="loader_upload2">

      </div>
      <div id="image">

      </div>

   #image{
background: url(https://crunchbase-production-res.cloudinary.com/image/upload/c_pad,h_140,w_140/v1401689124/y1awpmexi2tf9l7eqnyg.jpg) no-repeat;
    z-index: 99999;
    display: inline-block;
    background-size: 100% 100%;
    width: 90px;
    height: 90px;
    position: absolute;
    top: 45%;
    lefT: 50%;
    margin-left: -36px;

}
#loader_upload2 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 190px;
  height: 190px;
  margin: -75px 0 0 -75px;
  border: 16px solid #808080;
  border-radius: 50%;
  border-top: 16px solid #85C440;
  width: 140px;
  height: 140px;

  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}