2 颜色线性渐变进度条只完成一半

Question

我在尝试让 2 色线性渐变中途停止而不以第二种颜色结束时遇到问题。

所以想法是使用线性渐变来显示消耗了多少带宽。我有一个起始颜色，一个颜色 100% 应该代表。但是当我用线性渐变只显示 50% 时，50% 标记是第二种颜色。它应该只在两种颜色之间的一半左右，如果使用率为 100%，则颜色为 50%。

我使用这个代码：

background: linear-gradient(-90deg,  #438600, #8fd747);

但是 25% 和 75%（例如）的两端都会有 #8fd747。我需要它们以线性渐变中两种颜色之间的颜色 25% 和 75%（分别）结束。

我无法想象它有那么难，但我就是想不通。

谢谢

编辑： 这是我要查找的图片：

100%：

50%：

25%：

正如您在上面看到的，条形代表完整的渐变，即使在不完整的情况下也是如此。但是在那些小于 100% 的情况下，我希望渐变显示特定百分比的渐变级别，如 100% 所示。在实际达到 100% 之前，我不应该得到更深的颜色。

Answer 1

您需要调整 background-size 并使用多个背景才能获得此效果。顶层将是一个单一的颜色渐变，它将覆盖主渐变并只显示它需要的部分：

.progress { 
 height:30px;
 margin:20px;
 background-image: 
  linear-gradient(#ccc,#ccc),
  linear-gradient(to left,  #438600 , #8fd747 );
 background-size:var(--p,50%) 100%,100% 100%;
 background-position:right,left;
 background-repeat:no-repeat;
}

<div class="progress">
</div>
<div class="progress" style="--p:70%">
</div>
<div class="progress" style="--p:30%">
</div>

或者你可以用一个渐变来做，然后调整background-position:

.progress { 
 height:30px;
 margin:20px;
 background-image: 
  linear-gradient(to left,  #438600 , #8fd747 );
  background-size:100% 100%;
 background-position:var(--p,-200px) 0;
 width:400px;
 background-repeat:no-repeat;
 background-color:#ccc;
 
}

<div class="progress">
</div>
<div class="progress" style="--p:-50px;">
</div>
<div class="progress" style="--p:-300px;">
</div>

2 颜色线性渐变进度条只完成一半

2 color linear gradient progress bar only halfway complete

css

progress

linear-gradients