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>

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

2 个答案: