如何设置从任何颜色（好）线性渐变透明？

我想在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

来源

2014-01-13 sp00m

你可以去http://www.colorzilla.com/gradient-editor/ – Anup

原来的行为其实是正确的：http://www.w3.org/TR/css3-color/#transparent-def – DrCopyPaste

@DrCopyPaste好吧，这解释说，谢谢你指出它;） – sp00m

尝试改变transparent为rgba(255,0,0, 0)

例如小提琴：http://jsfiddle.net/9MpNM/

来源

2014-01-13 09:04:23 fcalderan

毫米....出于好奇....为什么它发生这种方式或任何解释你的答案工作？ – NoobEditor

您将第一个颜色设置为完全透明的红色。 – fcalderan

小提琴在问题和你的小提琴看起来一样。 – Anup

我刚修改您的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%);

来源

2014-01-13 09:13:22 Dan

这变得更接近了，但这仍然不是'红色透明'，而是'白色透明';） – DrCopyPaste

如何设置从任何颜色（好）线性渐变透明？

回答

相关问题