相同的背景颜色，不同的渐变宽度

Question

我正在尝试为部分 td 设置背景颜色，使其看起来类似于进度条背景：从左边到中间的某个地方，它是彩色的，在那个百分比之后，它是白色的。如果是 100%，当然整个 td 都是彩色的。

颜色 linear-gradient 在所有 td 上都相同，但长度会有所不同。我只有3个长度：

30%
70%
100%
也是0%，不过那时候就是空的，所以这不行

为此，我为每个变体使用特定的 class，.progress_**。每个 class 在 background 属性上有两个 linear-gradient。这是我目前的工作 CSS:

.progress_30 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 1) 30%
        ),
        linear-gradient(to right, yellow, green)
    ;   
}
.progress_70 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 1) 70%
        ),
        linear-gradient(to right, yellow, green)
    ;   
}
.progress_100 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 100%,
            rgba(255, 255, 255, 1) 100%
        ),
        linear-gradient(to right, yellow, green)
    ;   
}

如您所见，有很多重复的地方。我至少想把颜色放在一个单独的 .progress class 中，这样就可以在不改变长度的情况下轻松地改变它，这样我以后就可以在不改变颜色的情况下添加或改变一些长度。

所以我尝试了这个：

.progress {
    background: linear-gradient(to right, yellow, green);
}
.progress_30 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 1) 30%
        )
    ;
}
.progress_70 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 1) 70%
        )
    ;
}
.progress_100 {
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0) 100%,
            rgba(255, 255, 255, 1) 100%
        )
    ;
}

这并不完全有效：右边的白色部分是正确的长度。但是在左侧，我没有看到我的 linear-gradient，只有页面的背景颜色（不是白色）。

有没有办法让我在 CSS 中尽可能少地重复，至少 linear-gradient 的颜色只设置一次，或者我必须像在我的第一个例子？

Answer 1

您可以依赖 background-size 并将渐变声明保持在相同 class:

div {
  min-height: 50px;
}

.progress {
  background: 
   linear-gradient(#fff, #fff) right no-repeat, 
   linear-gradient(to right, yellow, green);
}

.progress_30 {
  background-size: 70% 100%, auto;
}

.progress_70 {
  background-size: 30% 100%, auto;
}

.progress_100 {
  background-size: 0% 100%, auto;
}

<div class="progress progress_30"></div>
<div class="progress progress_70"></div>
<div class="progress progress_100"></div>

如果您想考虑更多的百分比值，您可以使用 CSS 变量进行更多简化：

div {
  min-height: 50px;
}

.progress {
  background: 
   linear-gradient(#fff, #fff) right/calc(100% - var(--p,50%)) 100% no-repeat, 
   linear-gradient(to right, yellow, green);
}

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

<div class="progress" ></div>

相同的背景颜色，不同的渐变宽度

Same background color, different gradient width

css

linear-gradients