элемент прогресса прозрачный фон

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

}