如何用背景线性改变彩色进度条的宽度？

Question

我有这个CSS和HTML代码。

我的问题是我总是看到除了颜色之外的线性颜色，我将其定义为60％为绿色。从宽度的0-60％，我只想看到绿色，而不是其他。我认为当bar被定义为背景图像时它会起作用，但事实并非如此。

.bar-line {
    width: 100%;
    min-width: 120px;
    display:inline-block;
    position:relative;
    vertical-align: middle;
    color: #000;
    background-color: #f1f1f1;
}
.bar-container {
    padding: 0;
    min-height: 24px;
    max-width: 100%;
    color: #000;
    background-image: linear-gradient(to right, green 60%, yellow 85%, red 95%);
}
.bar-container:after, .bar-container:before {
    content: "";
    display: table;
    clear: both;
}
.bar-container span {
    position: absolute;
    left: 5px;
}

<div class="bar-line">
    <div class="bar-container" data-percent="30" style="width: 30%;">
        <span>30%</span>
    </div>
</div>

没有JS怎么做？

Answer 1

虽然将html部分做得更好不一样

   .bar-line {
    position: relative;
    width: 100%;
    height: 24px;
    display:inline-block;
    position:relative;
    vertical-align: middle;
    color: #000;
    background-image: linear-gradient(to right, green 60%, yellow 85%, red 95%);  
    overflow: hidden;
}
.bar-container {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  min-height: 24px;
  z-index: 0;
}

.bar-container span {
  text-indent: -100%;
  display: block;
  background-color: #f1f1f1;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1000vh;
  right: -1000vh;
  z-index:1; 
}

<div class="bar-line">
    <div class="bar-container" data-percent="30" style="width: 30%;">
        <span>30%</span>
    </div>
</div>

只需更改宽度值并查看结果:)。这里的肮脏技巧是有一个非常大的跨度，位于条形容器之后并覆盖其余的彩色条形线

Answer 2

使用多个背景并调整背景大小：

.bar-line {
    width: 100%;
    min-width: 120px;
    margin-bottom:10px;
    display:inline-block;
    position:relative;
    vertical-align: middle;
    color: #000;
    background-color: #f1f1f1;
}
.bar-container {
    padding: 0;
    min-height: 24px;
    max-width: 100%;
    color: #000;
    background: 
      linear-gradient(#f1f1f1,#f1f1f1) right/calc(100% - var(--d)) 100% no-repeat,
      linear-gradient(to right, green 60%, yellow 85%, red 95%);
}

.bar-container span {
    position: absolute;
    left: 5px;
}

<div class="bar-line">
    <div class="bar-container" style="--d:30%">
        <span>30%</span>
    </div>
</div>

<div class="bar-line">
    <div class="bar-container" style="--d:50%">
        <span>50%</span>
    </div>
</div>

<div class="bar-line">
    <div class="bar-container" style="--d:80%">
        <span>80%</span>
    </div>
</div>