进步元素透明背景

Question

我有一个<progress>栏，我想用linear-gradient为其轨道着色。 我希望实现的效果是让它的某些部分透明，所以我用这种方式设计

progress[value]::-webkit-progress-bar {

background-image:
linear-gradient(
to right,
red 33%,
rgba(0,0,0,0) 33%,
rgba(0,0,0,0) 66%,
yellow 66%,
yellow 100%);

}

这呈现为33％至66％部分的灰色条，而不是纯透明。我也尝试使用值transparent，但它似乎不起作用。我仍然得到一个坚实的默认颜色。

这是一个小提琴：http://jsfiddle.net/0jaysLzu/

是否可以将透明度应用于progress元素的轨道？

Answer 1

简答题背景图片：应该是背景：

答案很长

progress[value]::-webkit-progress-bar {

background-image:
linear-gradient(
to right,
red 33%,
rgba(0,0,0,0) 33%,
rgba(0,0,0,0) 66%,
yellow 66%,
yellow 100%);

}

应该是

progress[value]::-webkit-progress-bar {

background:
linear-gradient(
to right,
red 33%,
rgba(0,0,0,0) 33%,
rgba(0,0,0,0) 66%,
yellow 66%,
yellow 100%);

}