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

问题描述 投票:0回答:2

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

所以我们的想法是使用线性梯度来显示消耗了多少带宽。 我有一个起始颜色,并且应该代表 100% 的颜色。但是当我用线性渐变仅显示 50% 时,50% 标记是第二种颜色。 它应该只是两种颜色之间的大约一半,如果使用率为 100%,则 50% 时的颜色相同。

我使用这个代码:

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

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

我无法想象这有多难,但我就是想不通。

谢谢

编辑:这是我正在寻找的图像:

100%:enter image description here

50%:enter image description here

25%:enter image description here

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

css progress linear-gradients
2个回答
0
投票

您需要调整

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>


0
投票

您可以查看此 css-tricks 文档。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.