[英]How to display only part of a background image: linear gradient?
I'm curious nobody asked this question yet:我很好奇还没有人问过这个问题:
I'm creating a progress bar as a react component.我正在创建一个进度条作为反应组件。 I want to fill this progress bar with a linear gradient.
我想用线性渐变填充这个进度条。 But I also want to display only the completed percentage of that background-color.
但我也想只显示该背景颜色的完整百分比。
I didn't find how to resolve that.我没有找到解决方法。 Here is my CSS code:
这是我的 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%;
}
And here is the JS:这是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这是目前显示的内容
I want, in fact, to display only red as long as I'm under 20% width, And to display the green only if I approach the 100%..事实上,我只想在宽度小于 20% 时显示红色,并且只有在接近 100% 时才显示绿色..
Thanks to the comment, the solution is to use the 3rd div to hide part of the 2nd div.感谢评论,解决方案是使用第 3 个 div 隐藏第 2 个 div 的一部分。
.GradientHider{
height: 24px;
margin-left:50%;
background-color: lightgray;
}
And I realize that the first div was useless..我意识到第一个 div 没用..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.