如何在线性渐变中使用`currentColor`

Question

我想使用currentColor显示左侧的进度条进度。

在下面的示例中，我使用进度条的background而不是进度条的实际颜色。

https://jsfiddle.net/nick1111/tc4r0net/13/

＆＃13;

＆＃13;

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
  width: 250px;
  height: 20px;
}

progress::-webkit-progress-value {
  background: linear-gradient(to left, currentColor, rgba(255, 255, 255, .1));
}

＆＃13;

<div style="color:green;">
  <div>
    <progress value="80" max="100">70 %</progress>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何使用currentColor代替rgba（255,255,255，.1）？

由于

Answer 1

你可以尝试这样的事情。想法是使用两个渐变来模拟这种行为：

＆＃13;

＆＃13;

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
  width: 250px;
  height: 20px;
}

progress::-webkit-progress-value {
  background: 
  linear-gradient(to left, transparent, rgba(128,128,128,0.9)), 
  linear-gradient(to left, currentcolor, currentcolor);
}

＆＃13;

<div style="color:blue;">
  <div>
    <progress value="80" max="100">70 %</progress>
  </div>
</div>
<div style="color:green;">
  <div>
    <progress value="80" max="100">70 %</progress>
  </div>
</div>
<div style="color:white;">
  <div>
    <progress value="80" max="100">70 %</progress>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;