Fatal编程技术网
  • jquery/
  • Jquery 进度条与图像重叠

Jquery 进度条与图像重叠

jquery html css

Jquery 进度条与图像重叠,jquery,html,css,progress-bar,Jquery,Html,Css,Progress Bar,我想有一个图像是重叠的进度条。它基本上是一个温度计，显示某一点之前的特定进展。我已经成功地垂直翻转了进度条，并且了解了不透明度，但是我不确定如何实现它以获得我想要的结果。我是用拉威尔做的。以下是我的想法的基本代码： <style> .progress { width: 300px; height: 40px; position: 4px; /* Rotate div */ -ms-transform: rotate(7deg); /* IE

我想有一个图像是重叠的进度条。它基本上是一个温度计，显示某一点之前的特定进展。我已经成功地垂直翻转了进度条，并且了解了不透明度，但是我不确定如何实现它以获得我想要的结果。我是用拉威尔做的。以下是我的想法的基本代码：

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


.进展{
宽度：300px；
高度：40px；
位置：4px；
/*旋转div*/
-ms变换：旋转（7度）；/*IE 9*/
-webkit变换：旋转（7度）；/*铬合金、Safari、Opera*/
变换：旋转（270度）；
不透明度：0.9；
}
完成70%（危险）
我想要的是下面的图片，我正在使用进度条填充图片中的温度计

非常感谢您的帮助

我们可以获得温度计图像的url。我想将其作为背景图像，并选中尝试添加带有
位置：相对
的div容器和带有
位置：绝对
的内部放置进度条和图像。使用类似于
top:10px
，
left:10px
的方法调整图像css@NikhilNanjappa我已将图像重命名为“温度计图像”。这里还有网址->：@Meroz是的，我想我会试试