进度元素透明背景

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 但它似乎不起作用。我仍然得到一个纯色的默认颜色。

这里是 fiddle: 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%);

}

进度元素透明背景

progress element transparent background

html

css

progress-bar

progress