html - 将图像添加到进度条

Question

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

<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-->

以下是我正在使用的 css 类

.progress{
    margin-bottom: 0px;
}
.flex-well-container{
    display: flex;
    width:100%;
}
/*set the radius of the well to zero*/
.well-lg{
    border-radius: 0;
}

enter image description here这就是我希望我的酒吧看起来像的样子

enter image description here此链接显示了我得到的内容

如何解决这个问题。

Answer 1

你可以做

.progress {
    position: relative;
}

.progress img {
    position: absolute;
}

然后设置left: percentage - image width/2