如何仅使用HTML / CSS使图像的百分比透明？

Question

我想仅使用HTML / CSS实现晴雨表。我有一个背景图像，只是边框。并且在它上面填充颜色的前景图像。我的想法是想要显示前景图像的x％颜色以显示x％的进度。我认为可能会使图像的（1-x）％部分变得透明。有没有办法使用背景和前景图像来实现这个晴雨表？

HTML： -

<div class="alignfullhigher">
<table> 
<tbody> 
<tr>
<td class="backtable"><img src="background_no_fill_only_outline.png" width="100%"></td> 
</tr>
<tr> 
<td class="fronttable"><img src="foreground_fill.png" width="100%" height="160px"></td> 
</tr> 
</tbody>    
</table> 
</div>

CSS： -

.alignfullhigher{position:relative; width:100%; height:160px;top:0;right:0;}
.backtable{position:absolute;z-index:-1; width:100%; height:auto;}
.fronttable{position:relative;width:100%; clip: rect(0px,100px,160px,0px); )}