Question

我正在尝试将div上的线性渐变从红色设置为透明，但输出有点奇怪：fiddle。

小提琴的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%);

如何设置从任何颜色到透明的（漂亮）线性渐变？

2 个答案: