如何实现从下到上填充的HTML/CSS图片进度条？

我开发了一个基于两张图片的进度条，彩色图片按百分比填充背景灰度图片，当前代码可正常运行，但填充方向是从上到下，需要修改为从下到上。试过flexbox、切换top与bottom属性都没效果，求技术帮助。

原代码示例 #

HTML #

<div class="progress-container">
  <div class="progress" id="progress"></div>
</div>

CSS #

/* 注意：原代码里的setProgress(90)属于JS代码，不应放在CSS中，需移至JS执行 */
.progress-container {
  width: 268px;
  height: 608px;
  background-image: url('https://i.imgur.com/jl6OFd6.png');
  background-size: cover;
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
  margin-right: 20px;
  position: relative;
}

.progress {
  width: 100%;
  height: 0%;
  background-image: url('https://i.imgur.com/Xv6WaQ5.png');
  background-size: cover;
  background-position: top;
  position: relative;
  bottom: 0;
  left: 0;
  transition: height 0.2s ease-out;  
}

JavaScript #

function setProgress(percent) {
  var progressBar = document.getElementById('progress');
  progressBar.style.height = percent + '%';
}

// 调用示例
setProgress(90);

解决方案 #

只需调整.progress的CSS属性，核心是改变定位方式和背景图片的对齐位置：

1. 保留.progress-container的position: relative，为子元素绝对定位提供基准
2. 修改.progress的属性：
   • 将position: relative改为position: absolute，固定在容器底部
   • 将background-position: top改为background-position: bottom，确保彩色图片从底部开始显示
   • 保留bottom: 0，让进度条从容器底部向上扩展

修改后的CSS：

.progress-container {
  width: 268px;
  height: 608px;
  background-image: url('https://i.imgur.com/jl6OFd6.png');
  background-size: cover;
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
  margin-right: 20px;
  position: relative;
}

.progress {
  width: 100%;
  height: 0%;
  background-image: url('https://i.imgur.com/Xv6WaQ5.png');
  background-size: cover;
  background-position: bottom;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: height 0.2s ease-out;  
}

JS代码无需修改，调用setProgress(percent)时，进度条会从容器底部开始向上填充，实现目标效果。

内容的提问来源于stack exchange，提问作者Tiago Martins