Question

我希望有一个与进度条重叠的图像。它基本上是一个温度计，显示一定程度的进展直到一个点。我设法将进度条垂直翻转并了解不透明度，但我不确定如何实现它以获得我想要的结果。我是用laravel做的。以下是我的想法的基本代码：

<style> 
.progress {
    width: 300px;
    height: 40px;
    position: 4px;

    /* Rotate div */
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
    opacity:0.9;
}
</style>
</head>
<body>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

我想要的是如下图所示，我使用进度条填充该图像中的温度计

Thermometer image

非常感谢帮助

进度条与图像重叠

0 个答案: