將圖像添加到進度條

我使用引導進度條和進度條，因爲它工作正常。現在我想在進度條的移動部分前添加一個圖像，並且我希望該圖像隨着該進度條的移動而移動。將圖像添加到進度條

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

以下是我使用

.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 此鏈接CSS類說明了什麼我得到

如何解決此問題。

來源

2017-03-14 Rushil Ahuja

你可以複製一個的jsfiddle你的問題，所以我可以看看？ –

@EricGoncalves https://jsfiddle.net/ktqkrw9n/是小提琴的鏈接。需要的東西是我已經與帖子分享的圖片。 –

我已經更新了[JSFiddle]（https://jsfiddle.net/ktqkrw9n/3/） –

您可以

.progress { 
    position: relative; 
} 

.progress img { 
    position: absolute; 
}

，然後設置left:百分比 - 圖像寬度/ 2

來源

2017-03-14 19:42:43 Masiama

.progress { 
    position: relative; 
} 

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

JSFiddle

來源

2017-03-14 20:00:19

將圖像添加到進度條

回答

相關問題