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

您需要调整.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>

config_prefDialogWidth