Как установить (хороший) линейный градиент от любого цвета до прозрачного?

Question

Я пытаюсь установить линейный градиент на div от красного до прозрачного, но результат немного странный: . CSS

скрипки в:

background: -webkit-linear-gradient(transparent, red); 
background: -moz-linear-gradient(transparent, red); 
background:  -ms-linear-gradient(transparent, red); 
background:  -o-linear-gradient(transparent, red); 
background:   linear-gradient(transparent, red); 

Как вы можете видеть, переход между двумя цветами в сером цвете, в то время как я ожидал только красную градацию.

Кто-нибудь знает, как улучшить этот выход (не заменяя «прозрачный» на «желтый» в скрипке)?

PS: пытался в Chrome 23.0.1271.64

Answer 1

попробуйте изменить transparent в rgba(255,0,0, 0)

например скрипку: http://jsfiddle.net/9MpNM/

Answer 2

Я только изменил свой jsfiddle

Проверьте, как вы хотите

background: -webkit-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%); 
background: -moz-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%); 
background:  -ms-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%); 
background:  -o-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%); 
background:   linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);