2012-01-08 10 views
0

私がコードをテストした唯一のブラウザであるため、Firefoxに言及しましたが、誰かが私に包括的な解決策を与えることができればいいです。CSS3の勾配がFxの下でぼんやりとしている

background-image: -moz-linear-gradient(center top, rgb(30, 30, 30), rgb(4, 4, 4)); 

上記のコードを使用しています...手順はありますか?私は、滑らかではありませんが、非常に長方形のish、lightgrey、もう少し濃い灰色、明るい黒、黒の代わりにスムーズにお互いにフェードすることを意味します。これを防ぐ方法はありますか?

答えて

1

あなたは私よりも優れた色覚を持っています。グラデーションを見るには暗すぎる。それが今日のようとにかく、ここですべてのモダンブラウザをサポートするスタイルは、です:

フィドル:http://jsfiddle.net/zbeY3/1/

CSS

background:-moz-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); 
background:-o-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* Opera */ 
background:-webkit-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* Safari 5.1+, Chrome 10+ */ 
background:-ms-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* IE10 PP */ 
background:linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* W3C */ 
+1

私の例では私にブラックボックスが表示されています。 Firefox 9.0.1の使用。 – rekire

+1

あなたが提供した色の値をそのまま使用したからです。ここに私の更新された例があります:http://jsfiddle.net/zbeY3/1/ – Nix

0

私は通常、FFのために、この式を使用します。

background: -moz-linear-gradient(top, topvalue 0%, bottomvalue 99%); /* firefox */ 

あなたの場合:

background: -moz-linear-gradient(top, rgb(30, 30, 30) 0%, rgb(4, 4, 4) 99%); 

興味があれば、これは私がさまざまなブラウザをカバーするために使用するグループです。 #999から#000までの垂直グラデーションです。

/* CSS Gradients */ 

background: -moz-linear-gradient(top, #999999 0%, #000000 99%); /* firefox */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(99%,#000000)); /* webkit */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#000000',GradientType=0); /* ie */ 

希望します。

0

なぜ私のグラデーションが滑らかではないかを考えました(少なくとも私はそうだと思います:)) - これは、開始色と終了色の違いが小さすぎるためです。私は100x100pxのdivを作成しても大画面になりますが、大丈夫です...

関連する問題