css - このグラデーションをクロムで機能させるにはどうすればよいですか?

Question

このグラデーションをクロムで機能させる方法がわかりません。

background: linear-gradient(to bottom, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;

Chrome については、Webkit 固有のルールを使用する必要があることを理解していますか?

Answer 1

Webkit ベースのブラウザー以外の最近のブラウザーはすべて、プレフィックスを削除し、最新の構文を実装しています: Fx (通常と ESR の両方)、IE 10、Opera 12.10。

Chrome と Safari では、接頭辞付きの古い構文がまだ必要です。

元の構文 (-webkit-gradient(linear, …) ) は、これを必要とするブラウザーがほとんど使用されなくなったため、不要になりました。

最後のポイント: それを行う標準的な方法は、常に最後のプロパティを宣言する必要があります。そうすれば、ブラウザがそれを実装した場合、バグの可能性がある古い動作が常に優先されます。

したがって、正しい書き方は次のとおりです。

background: -webkit-linear-gradient(top, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;
background: linear-gradient(to bottom, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;

出典: MDN の線形勾配

Answer 2

クロム用

-webkit-linear-gradient

また、to bottom の代わりに top を使用します

Answer 3

Chrome には Webkit 固有のルールがまだ必要だと思います。次の構文を試してください。

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));

それはあなたのために働くはずです。

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

Answer 4

Webkit プレフィックスのバージョンは -webkit-linear-gradient になると思います。あなたの問題は、最初の引数が「下」ではなく「下」であることでしょうか?

background: linear-gradient(to bottom, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;
background: -webkit-linear-gradient(top, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;

ここで実際にこれを参照してください：http://jsfiddle.net/KAD2E/

Answer 5

-webkit-ベンダー プレフィックスを使用する必要があります (これto bottomはtopすべてのブラウザーで使用する必要があります) 。

background: -webkit-linear-gradient(top, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;