进度条圆圈问题周围的图像答案

【问题标题】：Image around the progress bar circle issue进度条圆圈问题周围的图像
【发布时间】：2017-08-23 05:35:59
【问题描述】：

我添加了进度条圆圈，我需要在进度条周围添加图像，但我无法正确执行。我已经为图像添加了背景，但它不是一个好的解决方案，因为我需要为列表创建，可能是 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;
}

【问题讨论】：

标签： css progress-bar bootstrap-4

【解决方案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和你的图片的url，你从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

【讨论】：

先生什么意思，正确答案不是我的问题
您想为每个圆圈添加不同的图像，对吧？好吧，代码让您将每个图像的路径放在一个变量中，然后将这些图像作为背景添加到您的每个圆圈中。
你能告诉我为什么你不赞成这个以便我可以修改代码吗？我在本地测试了它，它按预期工作，你需要做的就是在你的代码中实现它，每个圈子都会有不同的背景。
先生，我不知道我没有否决你的答案，不要误会
我的错，你能告诉我代码有什么问题吗？所以我可以帮助你。

【解决方案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>

【讨论】：