如何設置從任何顏色（好）線性漸變透明？

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

如何設置從任何顏色（好）線性漸變透明？

回答

相關問題