Css 图像顶部的Bootstrap 3进度条

要使用bootstrap 3的内置进度条：

但把它放在图片的顶部，比如温度计

---

我不确定从哪里开始，或者我是否应该不使用引导进度条来完成此任务。

一种方法是使用绝对定位

使用这种方法，外部容器必须有一个位置：relative，这样子元素相对于容器而不是整个页面有一个绝对位置“relative”。使容器的大小与图像x&y的大小相同，位置仅使图像位置绝对为0,0。然后，将进度条放置在看起来不错的位置

<div id='outer-container' style='position:relative;width:x;height:y;'>

    <img style='position:absolute;width:x;height:y;z-index:0;' />

    <div class="progress" style='position:absolute;top:{halfy};left:0;z-index:1;'>
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        60%
        </div>
    </div>
</div>

60%

另一种方法是将图像设置为背景图像，然后将进度条放置在具有背景图像的标记内。通过这种方式，它将覆盖，您不必进行绝对位置调整。

使用相对位置（父（图像））和绝对位置（子（温度计））