Question

我正在使用bootstrap进度条和进度条，工作正常。现在我想在进度条的移动部分前添加一个图像，我希望该图像随着条形图的进展而移动。

Constants

以下是我正在使用的css类

<div class="flex-well-container">
                        <div class="well well-lg" style="width:100%">
                            <div class="progress">
                                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    60% 
                                  </div>
                                  <img src="../img/ProgressAvatar.png">
                            </div>

                        </div><!--end well-->

                       <button class="btn btn-default btn-lg btn-play"><strong>Play Now</strong></button>
</div><!--end flex-well-container-->

enter image description here 这就是我希望我的栏看起来像

的样子

enter image description here 这个链接显示了我的内容

如何解决此问题。

Answer 1

你可以制作

.progress {
    position: relative;
}

.progress img {
    position: absolute;
}

然后设置left:百分比 - 图片宽度/ 2

Answer 2

.progress {
  position: relative;
}

.progress img {
  position: absolute;
  left: calc(60% - 50px); // percentage - .5 x width of image
}

JSFiddle

将图像添加到进度条

2 个答案: