进度元素透明背景

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

简答的background-image：应该是背景：

长的答案 你

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%); 

}