css - progress element transparent background -
i have <progress>
bar , want color track linear-gradient
. effect want achieve though having portions of transparent, styled way
progress[value]::-webkit-progress-bar { background-image: linear-gradient( right, red 33%, rgba(0,0,0,0) 33%, rgba(0,0,0,0) 66%, yellow 66%, yellow 100%); }
this renders grey bar in 33% 66% portion, instead of plain transparent. i've tried using value transparent
not seem work. still solid default color.
here fiddle: http://jsfiddle.net/0jayslzu/
is possible apply transparency track of progress
element?
short answer background-image: should background:
long answer have
progress[value]::-webkit-progress-bar { background-image: linear-gradient( right, red 33%, rgba(0,0,0,0) 33%, rgba(0,0,0,0) 66%, yellow 66%, yellow 100%); }
it should
progress[value]::-webkit-progress-bar { background: linear-gradient( right, red 33%, rgba(0,0,0,0) 33%, rgba(0,0,0,0) 66%, yellow 66%, yellow 100%); }
Comments
Post a Comment