围绕进度条圈子问题的图像

Question

我添加了进度条圈，我需要在进度条周围添加图片，但我无法正确执行。我已经添加了图像的背景，但它不是很好的解决方案，因为我需要为列表创建，可能是40个圆圈， 如何在进度条周围正确添加图片？

我正在使用此http://www.jqueryscript.net/loading/Dynamic-Circular-Progress-Bar-with-jQuery-CSS3.html

这是一个例子（我试着这样做）

我有这段代码：

.progress-bar div span {
  position: absolute;
  color:transparent;
  line-height: 175px;
  height: 175px;
  width: 175px;
  left: 12.5px;
  top: 12.5px;
  text-align: center;
  border-radius: 50%;
 background:url(user.png)no-repeat;
}

Answer 1

您可以使用jquery执行此操作。

首先，创建一个包含数组的变量，您可以根据需要为其命名。

var images = [
'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg',
'https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg',
'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg'

然后你说为每个.progress-bar div span添加一个css元素background-image，其中包含您从images变量获取的图片的网址。

var i=0
$('.progress-bar div span').each(function() {
    $(this).css('background-image', 'url('+images[i]+')');
    i = (i + 1) % images.length;
});

尝试一下，让我知道它是否对你有所帮助！

修改

以下示例将为您提供有关其工作原理的一般概念。

var images = [
  'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg',
  'https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg',
  'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg'
];

var i = 0;
$('.progress-bar div span').each(function() {
  $(this).css('background-image', 'url(' + images[i] + ')');
  i = (i + 1) % images.length;
})

.progress-bar div span {
  background-size: cover;
  display: block;
  width: 500px;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="progress-bar">
    <div>
      <span> Testing </span>
    </div>
  </div>
  <div class="progress-bar">
    <div>
      <span> Testing </span>
    </div>
  </div>
  <div class="progress-bar">
    <div>
      <span> Testing </span>
    </div>
  </div>
</div>

编辑2：

这是另一个有圆圈的例子：

https://codepen.io/anon/pen/qXLozZ

Answer 2

最后我找到了解决方案 我用jquery-circle-progress

https://github.com/kottenator/jquery-circle-progress

我使用此<span class="schoolclass-pro-bar-img"></span>并将图片放在<span>标记

之间

 <div ID="circle1">
<span class="schoolclass-pro-bar-img"></span>
</div>