0

これは私が持っているものです:

$("#list .active").closest('.header').css({
'background-color' : '#1a2e51',
'background-image' : '-webkit-gradient(linear, left top, left bottom, from(#2c3c6f), to(#071f31))',
'background-image' : '-webkit-linear-gradient(top, #2c3c6f, #071f31)',
'background-image' : '-moz-linear-gradient(top, #2c3c6f, #071f31)',
'background-image' : '-o-linear-gradient(top, #2c3c6f, #071f31)',
'background-image' : 'linear-gradient(to bottom, #2c3c6f, #071f31)'
});

オンラインの例: http://jsfiddle.net/qSfvK/

しかし、jQueryでうまく書いていないのでグラデーションが表示されないので、どうすればいいですか？

編集

CSS で動作させることはできますが、jquery では動作させません。このリンクを見て意味を確認してください:
http://jsfiddle.net/qSfvK/10/

4

1 に答える 1

1

これは、html やセレクタの問題ではなく、css マップ機能の動作に問題があります。この場合、ブラウザが解析して使用するバックグラウンド ステートメントを決定できるスタイルシートをブラウザに送信していません。代わりに、jQuery は毎回 background-image プロパティを上書きしているため、ブラウザの最終的な background-image プロパティは最後の'linear-gradient(to bottom, #2c3c6f, #071f31)'. 私が行ったように、ブラウザと互換性のないグラデーション ラインを削除し、フィドルを再実行することで、これをテストできます。

これを修正する方法は、使用されているブラウザに応じて適切な background-image プロパティを割り当てる JavaScript の条件行を追加することです。

そう...

IF Safari 4+、Chrome 1-9 ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-webkit-gradient(linear, left top, left bottom, from(#2c3c6f), to(#071f31))'
});​

ELSE IF Safari 5.1 以降、モバイル Safari、Chrome 10 以降 ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-webkit-linear-gradient(top, #2c3c6f, #071f31)'
});​

ELSE IF Firefox 3.6+ ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-moz-linear-gradient(top, #2c3c6f, #071f31)'
});​

ELSE IF Opera 11.10+ ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-o-linear-gradient(top, #2c3c6f, #071f31)'
});​

等々。

于 2012-09-16T11:25:04.563 に答える