進度元素透明背景

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

}