如何仅显示背景图像的一部分：线性渐变？答案

【问题标题】：How to display only part of a background image: linear gradient?如何仅显示背景图像的一部分：线性渐变？
【发布时间】：2021-04-17 14:56:32
【问题描述】：

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

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

我没有找到解决方法。这是我的 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>
    )
}

Here is what is displayed at the moment

事实上，我只想在宽度小于 20% 时显示红色，并且只有在接近 100% 时才显示绿色..

【问题讨论】：

用你的渐变填充整个栏。在此之上绘制另一个 div（向右对齐）以隐藏部分渐变。

标签： javascript css reactjs

【解决方案1】：

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

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

我意识到第一个 div 没用..

【讨论】：