漸變不工作在Firefox - 我需要特定的顏色順序？

Question

如果您看http://jsfiddle.net/q2cFb/1/，您可以看到#b和#a在Firefox（13.0.1）上不起作用。這是爲什麼？它適用於Chrome（使用不同的語法，但顏色相同）。

我是否需要使用某些特定顏色才能使用漸變效果？ #a和#c都使用兩種顏色，但#a不起作用。

HTML：

<div id='c'></div> 
<div id='b'></div> 
<div id='a'></div> 

CSS：

#c { 
    background-image: -moz-linear-gradient(center bottom , #131315 37%, #272727 75%); 
} 

#b { 
    background-image: -moz-linear-gradient(center bottom , #242424 80%, #1E1E1E 58%, #191919 20%); 
} 

#a { 
    background-image: -moz-linear-gradient(center bottom , #242424 80%, #191919 20%); 
} 

Answer 1

的問題是，你的百分比是不按遞增順序。見the MDN docs：

顏色停止必須按順序指定。

Answer 2

嘗試colorzilla它會自動執行CSS梯度編碼爲您服務。

梯度例如格式多瀏覽

background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); /* IE6-9 */