如何只显示背景图像的一部分:线性渐变

Question

我很好奇还没有人问这个问题：

我正在创建一个进度条作为反应组件。我想用线性渐变填充这个进度条。但我也想只显示背景色的完成百分比。

我不知道该怎么解决。这是我的CSS代码：

.ProgressBarContainer{
height: 24px;
width: 250px;
background-color: lightgray;
}
.ProgressBarGradient{
height: 24px;
width: 75%;
background-image: linear-gradient(to right, #a83e4c , #489668);
}
.ProgressBarFiller{
height: 24px;
width: 75%;
}

这是JS:

const ProgressBar = (props)=>{
return(
<div className={classes.ProgressBarContainer}>
<div className={classes.ProgressBarGradient}>
<div className={classes.ProgressBarFiller}></div>
</div>
</div>
)
}

以下是当前显示的内容

事实上，只要我的宽度在20%以下，我就只想显示红色，只有当我接近100%时，我才想显示绿色

Answer 1

感谢注释，解决方案是使用第三个div来隐藏第二个div的一部分。

.GradientHider{
height: 24px;
margin-left:50%;
background-color: lightgray;
}

我意识到第一个div是无用的。。